ホームページ >ウェブフロントエンド >htmlチュートリアル >ポップアップ レイヤー div ダイアログ_html/css_WEB-ITnose
ポップアップ レイヤー div ダイアログ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:56:201073ブラウズ
私が書いたポップアップボックスのスタイルは以下の通りです
便宜上、ファイルは1つのフォルダーに記述されています
dialog.js
えーdialog.html
(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.css
<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> 補助画像
下の黒い点は背景画像です blackbg.png
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。