Popup layer div dialog_html/css_WEB-ITnose-HTML Tutorial-php.cn

Popup layer div dialog_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:56:20

Original

1081 people have browsed it

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

Copy after login

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>

Copy after login

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

Copy after login

Auxiliary image

The black one below The point is the background image blackbg.png

icons.png