html div 弹层,弹出层divdialog_html/css_WEB-ITnose

自己写的弹出框 样式如下

为了方便 文件都写在一个文件夹下了

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 = $('

');$content = $('

');var $title = $('

' + _settings.title + '');var $warning_icon = null;if (_warning_icon[_settings.warning_icon] != undefined){$warning_icon = $('

');}if ($.isArray(_settings.button) && _settings.button.length > 0){var $buttons = $('

');var $button = null;for (var i = 0; i < _settings.button.length; i++){$button = $('' + _settings.button[i].button_name + '');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

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;}

辅助图片

下面的这个黑点是背景图片blackbg.png

icons.png

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网