使用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没 ...
随机推荐
- Rhel6-DM多路经存储配置文档
系统环境: rhel6 x86_64 iptables and selinux disabled 主机: 主机 网卡 软件 server21.example.com eth0:192.168.122. ...
- C语言编译链接
转载请标明: 编译链接是使用高级语言编程所必须的操作,一个源程序只有经过编译.链接操作以后才可以变成计算机可以理解并执行的二进制可执行文件. 编译是指根据用户写的源程序代码,经过词法和语法分析,将高级 ...
- JVM-并发-线程
线程 1.线程的实现 (1)实现线程主要有3中方式:使用内核线程实现,使用用户线程实现和使用用户线程加轻量级进程混合实现. (2)使用内核线程实现 内核线程就是直接由操作系统内核支持的线程,这种线程由 ...
- PHP fastcgi模式大文件上传500错误
最近在项目中中上传图片时,大约有300多K,结果报了个服务器错误,以前从未遇到过,错误的内容如下: mod_fcgid: www.111cn.net HTTP request length 13229 ...
- 通过j-interop访问WMI实例代码
代码: import java.net.UnknownHostException; import java.util.logging.Level; import org.jinterop.dcom.c ...
- iOS 剪贴板基本知识
在iOS 中下面三个控件,自身就有复制-粘贴功能 1.UITextView 2.UITextField 3.UIWebView UIKit framework提供了几个类和协议方便我们在自己的应用程序 ...
- UVA 12661（动态权值+最短路，dij）
题意:赛车背景,给你n个节点,m条边的图以及起点和终点:其中每条边的信息包括u(起点),v(终点),a(开启的时间),b(关闭的时间),d(通过这条道路的时间):求最短通过的时间,其中车在进的时候,保 ...
- JS运动基础(四) 碰撞运动
碰撞运动撞到目标点,速度反转无重力的漂浮Div速度反转滚动条闪烁的问题过界后直接拉回来 加入重力反转速度的同时,减小速度纵向碰撞,横向速度也减小横向速度小数问题(负数) <!DOCTYPE HT ...
- CSS3 里添加自定义字体
添加自定义字体是从 CSS3 开始的,下载到的字体可以在网页中使用. 下载字体 在网上找字体下载,文件后缀名有 ttf.otf 等. 在 CSS 里加载字体 @font-face { font-fam ...
- ZFIR054-现金流量表
*********************************************************************** * Title : ZFIR102 * * Applic ...