弹出层 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 ...
随机推荐
- 模拟Post
string d = "http://search.anccnet.com/searchResult2.aspx"; //name="__VIEWSTATE" ...
- hadoop学习；自己定义Input/OutputFormat；类引用mapreduce.mapper；三种模式
hadoop切割与读取输入文件的方式被定义在InputFormat接口的一个实现中.TextInputFormat是默认的实现,当你想要一次获取一行内容作为输入数据时又没有确定的键.从TextInpu ...
- hdu3570, 超级简单的斜率优化dp
dp[i] = dp[j] + (a[i] - a[j])^2 + m;展开得 dp[i] = min{dp[j] + a[i]^2 + a[j]^2 - 2*a[i]*a[j] + m}其中a[i] ...
- coco2dx c++ HTTP实现
coco2dx c++ HTTP实现 达到的结果如下面的 iPhone截图 android 日志截图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdnBp ...
- 怎么做fastreport使用离线数据源
近期使用做项目发现fastreport使用在线数据源.紧密耦合的数据库连接字符串.在部署稍加注意.easy错误.因此,是否想到脱机使用的数据源. 官方参考: watermark/2/text/aHR0 ...
- poj3233（矩阵快速幂）
poj3233 http://poj.org/problem?id=3233 给定n ,k,m 然后是n*n行, 我们先可以把式子转化为递推的,然后就可以用矩阵来加速计算了. 矩阵是加速递推计算的一 ...
- 将EBS设为首页worklist删除误报
参考:How To Remove Error Notifications From The Worklist (Doc ID 357904.1) 1.1. Use one of the error n ...
- js字的数目的计算方法（与word计算公式为）
[背景] 用户往往需要一定数量的单词填写必填字段限制,但js由value.length取出来的往往差异很大,与实际的话.通常真正的用户抱怨.很显然,我没有写那么多字,但系统提示超过字数限制.然后,我学 ...
- 【Web探索之旅】第二部分第二课：服务器语言
内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HT ...
- Java 打开文件的两种方式
import java.awt.Desktop; import java.io.File; import java.io.IOException; public class LnkDemo { pub ...