弹出层 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 ...
随机推荐
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...
- POJ 1696 Space Ant（点积的应用）
Space Ant 大意:有一仅仅蚂蚁,每次都仅仅向当前方向的左边走,问蚂蚁走遍全部的点的顺序输出.開始的点是纵坐标最小的那个点,開始的方向是開始点的x轴正方向. 思路:从開始点開始,每次找剩下的点中 ...
- matlab secant method
% Matlab script to illustrate the secant method % to solve a nonlinear equation % this particular sc ...
- vps自己搭建VPN（转）
1.购买一个VPS: https://www.pzea.com/North-America-openvz-vps.html 2.下载putty软件,进行vpn安装: http://www.chiark ...
- C陷阱与缺陷之语法陷阱
2.1理解函数声明 不论什么C变量的声明都由两部分组成:类型以及一组类似表达式的声明符号.比如 float f; 这个声明的含义是:当对其求值时,表达式f和g的类型为浮点数类.由于声 明符与表达式的相 ...
- IT增值服务，客户案例(一)--山东青岛在职人士，2年.Net经验，转Java开发半年
客户总体情况:2年.Net开发经验,2014年刚刚转Java半年.对Java的若干问题不是非常清楚,仅仅是对JSP/Servlet/JavaBean Spring.SpringMVC.Mybatis有 ...
- 【ALearning】第四章 Android Layout组件布局(一)
在本章中,我们将Android学习组件布局.在前面的章节,我们也开始使用LinearLayout布局.然后我们在布局文件更加具体的学习和理解,会. Android的界面是有布局和组件协同完毕的,布局好 ...
- 教你使用破解无线路由器笔记本password
近期非常多人问我怎么破解WiFipassword…看来大家都对免费的东西比較有兴趣.要么也可能是我太招摇了…囧… 好吧,我就写篇小小的教程,看完后,你应该可以破解大部分无线路由器password了.写 ...
- Java乔晓松-android中获取图片的缩略图(解决OutOfMemoryError)内存溢出的Bug
由于android获取图片过大是会出现内存溢出的Bug 07-02 05:10:13.792: E/AndroidRuntime(6016): java.lang.OutOfMemoryError 解 ...
- [Windows Phone] 如何在 Windows Phone 应用程式制作市集搜寻
原文:[Windows Phone] 如何在 Windows Phone 应用程式制作市集搜寻 [说明] 本文说明如何在 Windows Phone 应用程式中,加入市集搜寻的功能,主要使用了 Mar ...