使用CSS和jQuery实现对话框
因为项目中要显示一些对话框，但用alert显得太丑，后从网上找了一些插件，但有觉得不好用，因此自己试用CSS和jQuery写了一个对话框，代码如下：
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-315px min-width-480px min-width-768px min-width-1024px">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.css">
<script src="js/jquery-1.6.4.js">
</script>
<script src="js/jquery.mobile-1.0.1.js">
</script>
<link rel="stylesheet" href="css/jquery.mobile.simpledialog.css">
<script src="js/jquery.mobile.simpledialog.js">
</script>
<link rel="stylesheet" href="css/control_column.css">
<script>
$(function(){
$('#btnShowDialog1').click(function(){
messageBox('提示', '提示内容1', 1);
})
}) function messageBox(title, context, flag, funOK, funCancel)
{
var strMask = "";
strMask += '<div class="message-box-mask"><p></p><br></div>'
var strHtml = "";
strHtml += '<div class="message-box">';
strHtml += '<h3>' + title + '</h3>';
strHtml += '<div class="message-box-context">' + context + '</div>';
strHtml += '<div class="message-box-buttons">';
if(flag == 1)
{
strHtml += '<a id="btnOK" data-role="button" data-theme="b">确定</a>';
}
else if(flag == 2)
{
strHtml += '<div class="controls_group label_text"><div class="controls_row"><div class="controls_column_first controls_column_2">';
strHtml += '<a id="btnOK" data-role="button" data-theme="b">确定</a></div>';
strHtml += '<div class="controls_column_second controls_column_2">';
strHtml += '<a id="btnCancel" data-role="button" data-theme="b">取消</a></div></div>';
}
strHtml += '</div>';
strHtml += '</div>';
$('div[data-role="content"]').append(strMask);
$('div[data-role="content"]').append(strHtml);
$('.message-box-buttons a').each(function(){
$(this).button();
});
$('.message-box').css('display', 'block');
$('.message-box-mask').css('display', 'block');
$('.message-box-mask').css('opacity', '0.1');
$('.message-box-buttons #btnOK').click(function(){
$('.message-box').css('display', 'none');
$('.message-box-mask').css('display', 'none');
$('.message-box-mask').css('opacity', '0.1');
if(funOK)
{
funOK();
}
});
$('.message-box-buttons #btnCancel').click(function(){
$('.message-box').css('display', 'none');
$('.message-box-mask').css('display', 'none');
$('.message-box-mask').css('opacity', '0.1');
if(funCancel)
{
funCancel();
}
});
} </script>
<style type="text/css">
.message-box-mask
{
width:100%;
height:100%;
line-height:100%;
background-color:gray;
z-index:100;
position:fixed;
top:0;
left:0;
opacity:0.1 !important;
}
.message-box
{
width:80%;
margin:0 auto;
padding:0;
text-align:center;
position:fixed;
top:10%;
left:10%;
z-index:1000;
text-shadow:none !important;
background-color:transparent;
} .message-box h3
{
width:100%;
margin:0 auto;
padding:0;
background-color:silver;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
.message-box-context
{
width:100%;
margin:0 auto;
padding:0;
background-color:white;
text-align:left;
}
.message-box-buttons
{
width:100%;
margin:0 auto;
padding:10px 0;
background-color:silver;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
.message-box-buttons .control_row, .message-box-buttons .controls_column_first, .message-box-buttons .controls_column_second
{
background-color:silver; } .message-box-buttons .controls_column_first
{
border-bottom-left-radius:10px;
} .message-box-buttons .controls_column_second
{
border-bottom-right-radius:10px;
}
</style>
</head>
<body onload="initPage();">
<div data-role="page">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>GroupBox</h1>
</div>
<div data-role="content">
<div>
<a id="btnShowDialog1" data-role="button" data-theme="b">显示对话框</a>
</div>
<div style="margin-top:100px;">
<a id="btnShowDialog2" data-role="button" data-theme="b" onclick="messageBox('提示','提示内容2', 2)">显示对话框</a>
</div>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>GroupBox</h1>
</div>
</div>
</body>
</html>
主要思想是通过绝对定位的方式和z-index来使对话框显示在最前面，而为了实现模态对话框的效果，添加了一个mask层，mask的思路也对话框一样。试用效果如下：
使用的使用只用给messageBox函数中传递相关参数就可，算是很方便了。
使用CSS和jQuery实现对话框的更多相关文章
- jQuery cxDialog 对话框
cxDialog 是基于 jQuery 的对话框插件,支持自定义外观样式,同时兼容 Zepto,方便在移动端使用. 版本: jQuery v1.7+ | Zepto v1.0+ jQuery cxDi ...
- jQuery UI 对话框（Dialog） - 模态表单
<!doctype html><html lang="en"><head> <meta charset="utf-8" ...
- 15款基于 jQuery模态对话框
在数字世界的竞争已大大增加.这就是为什么要确保网络设计的各个方面都是一流的,这是很重要的.从布局到一些非常小的东西,比如对话框,每一件都需要设计得很好.对话框通常被忽视,但它们可能对访问者有很大的影响 ...
- CSS与JQuery的相关问题
文字隐藏:p div里面的文字过长时隐藏文字: overflow:hidden; text-overflow:ellipsis; white-space:nowrap; --------------- ...
- 使用CSS和jQuery实现tab页
使用jquery来操作DOM是极大的方便和简单,这儿只是简单的用一个使用css和jquery来实现的tab页来简单介绍一些jQuery的一些方便使用的方法,下面是html文件: <!DOCTYP ...
- 区域及分离、Js压缩、css、jquery扩展
后台管理区域及分离.Js压缩.css.jquery扩展 本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做 ...
- 动态加载js和css的jquery plugin
一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...
- JavaScript ,Css and Jquery In OpenERP 7.0
From: http://openerpbay.blogspot.jp/2013/02/javascript-css-and-jquery-in-openerp-70.html Hi fellows, ...
- css与jquery、图标字体
*)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...
随机推荐
- C语言基础--变量存储细节
1.变量为什么要有类型? 每种类型占用的内存空间不一样 int 4, char 1 double 8 2.只要定义变量, 系统就会开辟一块存储空间给我们的变量存储数据, 内存寻址是从大到小 3.越 ...
- Python排序算法
不觉已经有半年没写了,时间真是容易荒废,这半年过了个春节,去拉萨旅行.本职工作也很忙,没有开展系统的学习和总结. 今年开始静下心来从基础开始学习,主要分为三部分,算法.线性代数.概率统计. 首先学习算 ...
- zookeeper安装配置
以3.3.3为例(当然,前提是要安装好jdk,zookeeper的启动时依赖于jdk的) (1) wget http://www.apache.org/dist//zookeeper/zookeepe ...
- 寻找研究基于NS2研究覆盖网络的小伙伴:)
如题,本人菜鸟刚刚入门,想找些基于NS2研究覆盖网络方面的小伙伴,具体点是关于覆盖网络中QoS服务调度方法方面的,有的小伙伴可以留下联系方式,或者加我QQ:245939069 :P:P:P
- 使用PHP处理文本小技巧
PHP的Cli模式使用:http://www.php.net/manual/zh/features.commandline.php PHP命令行部分参数:-B 在处理 stdin 之前先执行 ...
- 建立开发板与PC机之间的nfs服务器
ARM开发板与PC通过NFS 网络文件系统挂接,很方便文件的移动,也为我们的开发带来了方便.接下来,我就详细的介绍下如何建立ARM与PC机的挂接. 我是用的UBuntu系统. 首先,我们需要在主机上安 ...
- Java数据结构和算法之哈希表
五.哈希表 一般的线性表.树中,记录在结构中的相对位置是随机的即和记录的关键字之间不存在确定的关系,在结构中查找记录时需进行一系列和关键字的比较.这一类查找方法建立在“比较”的基础上,查找的效率与比较 ...
- bootstrap-4
html文档中,列表结构主要有三种:有序列表.无序列表和定义列表:<ul><li>.<ol><li>.<dl><dt><d ...
- GDB中文手册
用GDB调试程序GDB概述 2使用GDB 5GDB中运行UNIX的shell程序 8在GDB中运行程序 8调试已运行的程序 两种方法: 9暂停 / 恢复程序运行 9一.设置断点(BreakPoint) ...
- cdr创建样式与样式集的方法
样式是一组定义对象属性的格式化属性,如轮廓或填充.例如,要定义轮廓样式,您可以指定轮廓宽度.颜色和线条类型等属性.要定义字符样式,您可以指定字体类型.字体样式和大小.文本颜色和背景色.字符位置.大写等 ...