弹出层 div dialog

写你自己的弹出框风格，如下面

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWluZ2xpYW5sdWFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWluZ2xpYW5sdWFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

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;

}

辅助图片

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

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcWluZ2xpYW5sdWFu/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

icons.png

弹出层 div dialog的更多相关文章

69.js--点击事件等比例弹出层div
html: <div class="public-nav-content"> <ul> <li><a ...
jQuery第三课点击按钮弹出层div效果
jQuery 事件方法事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...
div滚动条弹出层效果（所需要的css文件和js文件，都已经上传到文件里面了progressbar.rar）
<%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...
点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth
变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...
关于淘宝店铺装修弹出层popup的记录
小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...
Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)
一.实际项目中有很多如下界面效果. 二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码: <!DOCTYPE html> <html> & ...
Popup - 弹出层
//图片类快捷弹出层 <a href="" target="_blank"> <div class="panlifang1" ...
OA项目之弹出层中再弹出层
弹出层中再弹出一层如图: <asp:TextBox runat="server" ID="txtUName" CssClass="span2&q ...
js 带遮罩层的弹出层
最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

随机推荐

文件下载-SpringMVC中測试
直接改动文件路径就能够.其它都不须要改动,帮助类已经为大家写好,可直接使用 1.Scroller: /** * 下载文件 * @author liupeng * @param request * @p ...
解决错误 fatal error C1010: unexpected end of file while looking for precompiled head
在编译VS时候,出现fatal error C1010: unexpected end of file while looking for precompiled head. 问题详解:致命错误C10 ...
python学习笔记之九：模块和包
Python的标准安装包括一组模块,称为标准库.这里介绍模块的工作方式,学习如何使用它们. 一. 模块 1.1 用import从外部模块获取函数并为自己的程序所用: >>> from ...
oracle一个用户密码管理多达同意三次企图登录
假设一个用户登录连续失败三次.两日,锁定用户,两天后再次登录的用户的能力. 创建profile文件: 更新账户: 三次登录失败后用户就会被锁定: 用户锁住之后要怎么给他解锁: 解锁之后就能够正常登录了 ...
使用NSCondition实现多线程同步
iOS中实现多线程技术有非常多方法. 这里说说使用NSCondition实现多线程同步的问题,也就是解决生产者消费者问题(如收发同步等等). 问题流程例如以下: 消费者取得锁,取产品,假设没有,则wa ...
POJ1469_COURSES(二部图最大匹配)
解决报告 http://blog.csdn.net/juncoder/article/details/38136065 题目传送门题意: n个学生p门课程,每一个学生学习0或1以上的课程. 问:能否 ...
iOS8推送消息的回复处理速度
iOS8我们有一个新的通知中心,我们有一个新的通报机制.当在屏幕的顶部仅需要接收一个推拉向下,你可以看到高速接口,天赋并不需要输入应用程序的操作.锁定屏幕,用于高速处理可以推动项目. 推送信息,再次提 ...
经excel要将数据库（ORACLE)要插入数据
大家都知道PL/SQL可以excel数据复制.我们也可以通过相同excel将数据插入到数据库. 下面我们就来简单的样品,并与主题演示首先,我们创建了一个表test CREATE TABLE test ...
数据结构 - AVL木
在计算机科学,AVL木是一个平衡树最早发明. 于AVL树节点,而不管是什么的两个子树之一的高度之间最大的区别,因此,它也被称为平衡树高.查找.O(log n). 插入和移除可能需要一个或更多次通过旋转 ...
AND信号灯和信号灯集-----同步和互斥解决面向对象(两)
AND信号互斥的上述处理,它是针对仅在进程之间共享的一个关键资源方面.在一些应用.这是一个过程,需要在为了自己的使命后,获得两个或多个其他共享资源运行. 个进程A和B.他们都要求訪问共享数据D和E. ...

弹出层 div dialog

弹出层 div dialog的更多相关文章

随机推荐

热门专题