弹出层 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 ...
随机推荐
- 解决set /p yn= 接受键盘输入导致ECHO 处于关闭状态的问题
今天写了一个自动更新程序的批处理脚本,但是有个变量一直赋值有问题.弄了一个下午终于找到原因及解决方法: ----转载要说明来自:博客园--邦邦酱好 哦 有问题的代码如下: @echo off echo ...
- Android 上实现非root的 Traceroute -- 非Root权限下移植可运行二进制文件 脚本文件
作者 : 万境绝尘 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/36438365 演示样例代码下载 : -- CSDN : h ...
- Qt学习一门：直接使用QT具
今天,通过直接使用QT一些工具来编写命令行程序.你可以看到一种Qt更一般的用法. 内容很easy,输出电流日期. 首先,用一个QDate分类,可以使用QDate类的静态方法currentDate为了得 ...
- 线程锁的概念函数EnterCriticalSection和LeaveCriticalSection的使用方法
线程锁的概念函数EnterCriticalSection和LeaveCriticalSection的使用方法 注:使用结构CRITICAL_SECTION 需增加头文件#include “afxmt. ...
- POJ3279 Catch That Cow（BFS）
本文来源于:http://blog.csdn.net/svitter 意甲冠军:给你一个数字n, 一个数字k.分别代表主人的位置和奶牛的位置,主任能够移动的方案有x+1, x-1, 2*x.求主人找到 ...
- 【PHP】PHP5.4.0版本号ChangeLog具体解释（上）
前言 随着大量的框架使用composer和namespace,渐渐的线上环境也从之前的5.3变成了5.4或者5.5甚至5.6,随着7月份PHP7的公布,会有很多其它的公司採用新版本号. 之前好久就想写 ...
- NYOJ710 外星人的供给站 【贪心】
外星人的供给站 时间限制:1000 ms | 内存限制:65535 KB 难度: 描写叙述 外星人指的是地球以外的智慧生命.外星人长的是不是与地球上的人一样并不重要,但起码应该符合我们眼下对生命基 ...
- 使用C#和.NET 4编写的并行应用程序“多核并发编程的规则”
“多核并发编程的规则” 规则的描述如下 1. 并发编程的思想—这条规则就是要谨记并发编程思想进行设计,就像前边章节所提交的. 2. 面向抽象编程-你可以利用.NET4中的TPL提供 ...
- 主从集群搭建及容灾部署redis
redis主从集群搭建及容灾部署(哨兵sentinel) Redis也用了一段时间了,记录一下相关集群搭建及配置详解,方便后续使用查阅. 提纲 l Redis安装 l 整体架构 l Redis主 ...
- js实现文字逐个显示
先把代码摆上了吧: <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtm ...