ポップアップレイヤー div ダイアログ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ポップアップレイヤー div ダイアログ_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:56:20

オリジナル

1060 人が閲覧しました

私が書いたポップアップボックスのスタイルは以下の通りです

便宜上、ファイルは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

icons .png