彈出層 div dialog

標籤：彈出層 div dialog

自己寫的彈出框 樣式如下

為了方便 檔案都寫在一個檔案夾下了

dialog.js

(function( $, window, undefined ){ var _basepath = "";var  init = {hide_oprate: 'remove',//when has no button do remove or destroytitle : "",button: [],//for example: [{event_method: "click", button_name: "???", callback: function: dosubmit(){form.submit();}, callback_context:this}] and default event is "click"button_container_width: "480px",warning_icon: ""}var _warning_icon = {ok: "url("+ _basepath +"icons.png) -7em -6em;", edit: "url("+ _basepath +"icons.png) -0em -6em;", hard:"url("+ _basepath +"icons.png) -14em -6em;"};var _$dialog = null;var bindEvent = function ($selector, event, eventfn, ctxt){$selector.bind(event, function(){eventfn.call(ctxt);});}var run = function (settings) {settings = settings || {};var _settings = $.extend(init, settings);var windowH =$(window).height();var dialog_top = (windowH-220)/2 +'px';$container = $('<div class="myDialog" style="padding-top: '+ dialog_top +'"></div>');$content = $('<div class="myDialogCont borderRadius"></div>');var $title = $('<h3>' + _settings.title + '</h3>');var $warning_icon = null;if (_warning_icon[_settings.warning_icon] != undefined){$warning_icon = $('<p style="width: 7em;height: 7em;background:' + _warning_icon[_settings.warning_icon] + 'margin: 0 auto;"></p>');}if ($.isArray(_settings.button) && _settings.button.length > 0){var $buttons = $('<div class="quesMakeButtons buttons"></div>');var $button = null;for (var i = 0; i < _settings.button.length; i++){$button = $('<button role="button"><span class="ui-button-text">' + _settings.button[i].button_name + '</span></button>');if (_settings.button[i].event == undefined){_settings.button[i].event = "click";}bindEvent($button, _settings.button[i].event, _settings.button[i].callback, _settings.button[i].callback_context)$buttons.append($button);}} else{$container.bind("click", function(){if (_settings.hide_oprate == 'remove'){$(this).remove();} else{$(this).hide();}});}$content.append($title);$content.append($warning_icon);$content.append($buttons);$container.append($content);$("body").append($container);_$dialog = $container;};$.fn.dialog_show = function(settings){if (_$dialog == null){return run.call(this, settings);} else{_$dialog.show();}};$.fn.dialog_close = function () {if (_$dialog != null){_$dialog.hide();} }$.fn.dialog_destroy = function () {if (_$dialog != null){_$dialog.remove();_$dialog = null;}}})( jQuery, window );

dialog.html

<html><head><link type="text/css" href="dialog.css" rel="stylesheet"><script src="jquery-1.9.0.min.js" type="text/javascript"></script><script src="dialog.js" type="text/javascript"></script></head><body><div class="mydiv"></div><script>function doCallback(){$(".mydiv").dialog_close();}function doCallback2(){$(".mydiv").dialog_destroy();}$(".mydiv").dialog_show({title:"操作成功", warning_icon: "ok", button:[{event_method: "click", button_name: "確定", callback: doCallback, callback_context:this},{event_method: "click", button_name: "取消", callback: doCallback2},//{event_method: "click", button_name: "取消", callback: doCallback2}]});</script></body></html>

dialog.css

.myDialog {background: url(blackbg.png);position: fixed;width: 100%;height: 100%;top: 0;left: 0;display:block;}.myDialog h3 {font-weight: normal;}.myDialog .myDialogCont {width: 30em;background: #fff;padding: 1em;border: 1px #adadad solid;text-align: center;margin: 0 auto;border-radius: 6px;}.myDialog .buttons {text-align: center;}.myDialog .buttons button {font-size: 1.2em;font-family: 'microsoft yahei';margin: 0 1em;color: #ffffff;background-color: #0064cd;background-repeat: repeat-x;background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);cursor: pointer;display: inline-block;padding: 5px 14px 6px;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);transition: 0.1s linear background-image;border-radius: 6px;overflow: visible;}

彈出層 div dialog