弹出层 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 ...
随机推荐
- Hibernate 配置详解(11)
hibernate.session_factory_name_is_jndi 配置hibernate.cfg.xml中SessionFactory的name属性是否作为JNDI名称绑定.默认是true ...
- margin 还能够被缩回
<p><strong>话:</strong>的肥沃和收获而被估价的.才干也是土地,只是它生产的不是粮食,而是真理.假设仅仅能滋生瞑想和幻想的话,即使再大的才干也仅仅 ...
- Django - Django框架 简单介绍
Django框架 简单介绍 本文地址: http://blog.csdn.net/caroline_wendy/article/details/29172271 1. 介绍 Django是一个开放源码 ...
- C++ 复制功能
C++ 复制功能 说C++复制功能,它可能不是很熟悉.类中的拷贝构造函数和赋值操作符.可是其实或许我们一不小心就会忽略编译器所做的一些默认操作.引起晦涩的错误.以下分析几种场景: 一.场景一:所有默认 ...
- Yii 控制dropdownlist / select 控件的宽度和 option 的宽度
默认情况下, option的宽度会由options中最宽的元素决定,并且同时决定着select控件的宽度 在Yii中,如果需要自定义select控件的宽度,可以用 htmlOptions定义,如下: ...
- CentOS tripwire-文件指纹
Tripwire是目前最为著名的unix下文件系统完整性检查的软件工具,这一软件采用的技术核心就是对每个要监控的文件产生一个数字签名,保留下来.当文件现在的数字签名与保留的数字签名不一致时,那么现在这 ...
- MessageBox()功能
MessageBox()功能.这是一个非常频繁使用的Win32 API,在屏幕上显示一个窗体,提出问题,并等待用户输入.它的原型是 int MessageBox(HWND hwnd,LPCTSTR l ...
- drools6 基本使用 -- 2
续drools6 基本使用1 http://blog.csdn.net/cloud_ll/article/details/26979355 8. 创建src/main/test folder.把dro ...
- 【Unity技能】做一个简单的NPC
1. 写在前面 前几天我看到cgcookie一个教程.学习了下怎么依据已有人物模型制作一个仿版的NPC人物.感觉挺好玩的,整理一下放到博客里! 先看一下教程里面的终于效果. 是不是非常像个幽灵~ 以下 ...
- google在线测试练习2
Problem Given a list of space separated words, reverse the order of the words. Each line of text con ...