弹出层 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 ...

随机推荐

内存泄露检測及cvClone造成的泄露
调了几个小时,到最后发现内存泄露的原因是opencv的cvClone函数,採用cvCopy函数后,问题解决. vs2010使用vld进行内存泄露检測 (1) 下载vld工具 (2) 将D:\Progr ...
mysql替换字段里数据内容部分字符串（亦可用于增加字段中的内容）
mysql替换表的字段里面内容,如例子: mysql> select host,user from user where user='testuser'; +----------------- ...
使用Visual Studio 2010 创建简单的Silverlight应用程序
使用Visual Studio 2010 创建简单的Silverlight应用程序 Silverlight是创建动态的引人的RIAs(Rich Internet Application)的新方法.这里 ...
Composite Design Pattern 设计模式组合
设计模式组合,它能够更类组合在一类,形成一个树状结构. #include <set> #include <iostream> #include <string> u ...
HOJ2275 Number sequence
Number sequence My Tags tag=&type=or" style="margin:0px; padding:0px; color:rgb(27,87, ...
Python学习路径8——Python对象2
1.标准型运营商 1.1对象值对照比较运算符用于如果相同类型的对象是相等.所有的内建类型的是在比较操作中支持,返回布尔比较操作值True 或 False. <span style=" ...
elasticsearch中国字（mmseg）——手动添加字典
elasticsearch中国文字本身并不是一个理想的插件效果.手动添加字典可以补偿在一定程度上. 后发现了几个实验,mmseg分段机制采用正向最长匹配算法.例如,抵抗"小时报"这 ...
WinCE CAB Manager 3.0学习
VS自带智能设备打包工具,能实现打包.但是,打包安装部署之后,设备上面没有卸载,找了好多资料,最终都没有解决. WinCE CAB Manager3.0完美解决. 打包步骤如下, 一,打开WinCE ...
绕过电信访问Google
最近google被“DNS污染系统”攻击,导致域名无法正常跳转到解析IP,google业务无法访问,也无法使用google搜索,DNS域名污染系统攻击造成google本身故障的假象,针对此问题,一般都 ...
Autodesk FBX SDK Program 中文 (二)
这是Autodesk FBX SDK学习笔记第二篇.下面部分汉字翻译自Autodesk FBX SDK Program.翻译人:有道翻译. 上一篇讲了一些FBX SDK的基本操作.创建FbxManag ...

弹出层 div dialog

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

随机推荐

热门专题