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

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的更多相关文章

  1. 69.js--点击事件等比例弹出层div

    html:<!--弹出层导航栏--> <div class="public-nav-content"> <ul> <li><a ...

  2. jQuery第三课 点击按钮 弹出层div效果

    jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...

  3. div滚动条弹出层效果 (所需要的css文件和js文件,都已经上传到文件里面了progressbar.rar)

    <%--总的弹出层--%> <div class="tcck" id="joinclub" style="display:none& ...

  4. 点击图片或者鼠标放上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 ...

  5. 关于淘宝店铺装修弹出层popup的记录

    小龙最近做了一下下淘宝的店铺装修,里面封装的widget深不见底,刚刚整明白popup,也就是弹出层的使用方法,大神勿喷: <div class="area001">触 ...

  6. Jquery和Javascript 实际项目中写法基础-弹出窗和弹出层 (4)

     一.实际项目中有很多如下界面效果.    二.该效果可以归结为弹出窗或者弹出层来实现的,为什么这么说?看如下代码:      <!DOCTYPE html> <html> & ...

  7. Popup - 弹出层

    //图片类快捷弹出层 <a href="" target="_blank"> <div class="panlifang1" ...

  8. OA项目之弹出层中再弹出层

    弹出层中再弹出一层如图: <asp:TextBox runat="server" ID="txtUName" CssClass="span2&q ...

  9. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

随机推荐

  1. 内存泄露检測及cvClone造成的泄露

    调了几个小时,到最后发现内存泄露的原因是opencv的cvClone函数,採用cvCopy函数后,问题解决. vs2010使用vld进行内存泄露检測 (1) 下载vld工具 (2) 将D:\Progr ...

  2. OpenCV, color reduction method

    转载请注明出处!!!http://blog.csdn.net/zhonghuan1992 OpenCV, colorreduction method 目标: 这次学习的目标是回答以下的几个问题: 1 ...

  3. 使用AngularJS开发下一代Web应用

    原版的:https://github.com/edagarli/AngularJSWeb 来源书:https://github.com/shyamseshadri/angularjs-book 版权声 ...

  4. CSS检测的高像素密度屏幕设备

    iPhone4尽管是640px解析度,但它的屏幕宽度(device-width)目前只有320px和iPhone3G相同.只是iPhone4S的像素密度2. 然后使用meta viewport什么时候 ...

  5. JDK基本介绍

    JDK这是Java Development Kit 缩写,中国被称为Java开发套件.由SUN该公司提供.这是Java应用程序开发提供了编译和执行环境,所有的Java写程序都依赖于它. JDK能够将J ...

  6. android 项目中设置背景图片

    xml文件设置背景图片中:任意一个控件,button imageView 或layout,在其的xml属性设置中,添加 [XML] view plaincopy android:background= ...

  7. Oracle 11g client安装和配置。

    数据库和client在不同的机器. 安装前的准备.在安装过程中Oracle数据库server导航到下面的文件夹. 将listener.ora和tnsnames.ora中的host中的localhost ...

  8. POJ 1019 Number Sequence 解读

    这是一个看似简单,其实很难受. 本来我想发挥它的标题轨道基础.没想到反被消遣-_-|||. 看它在个人基础上,良好的数学就干脆点,但由于过于频繁,需求将被纳入全,因此,应该难度4星以上. 方法就是直接 ...

  9. GCD code block

    在这里积累一些片段,由于备忘录. + (DRClass *)sharedDR{ //创建小黑.正常ap模式仅仅有一个小黑,so static DRClass *aDR = nil; static di ...

  10. R三星463无线网卡驱动,声音驱动程序,FN快捷键驱动,Easy_Display_Manager

    http://download.csdn.net/detail/u012120447/7568369 当我们重装系统,该卡不能使用,您需要使用快捷键无法使用时, Easy_Display_Manage ...