Home >Web Front-end >HTML Tutorial >Popup layer div dialog_html/css_WEB-ITnose
Popup layer div dialog_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:56:201074browse
The pop-up box style I wrote is as follows
For convenience, the files are all written in one folder
dialog.js
(function( $, window, undefined ){ var _basepath = ""; var init = { hide_oprate: 'remove',//when has no button do remove or destroy title : "", 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;} Auxiliary image
The black one below The point is the background image blackbg.png
icons.png
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn