使用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没 ...
随机推荐
- 在standalone模式下运行yarn 0.9.0对HDFS上的数据进行计算
1.通读http://spark.incubator.apache.org/docs/latest/spark-standalone.html 2.在每台机器上将spark安装到/opt/spark ...
- Jmeter—2 http请求—简单的get请求
发送一个简单的get http请求 1 启动Jmeter,在测试计划上点击鼠标右键>添加>Threads(Users)>线程组 2 线程组界面.可设置线程数,几秒启动所有线程,循环次 ...
- 关于CSS reset
关于CSS resetCSS reset(css重置)基本上是不需要的,至少可以说80%的的CSS reset都是没有必要的,反而增加了页面CSS 的overwrite,尤其像开心网*{margin: ...
- WCF vs ASMX WebService
This question comes up a lot in conversations I have with developers. “Why would I want to switch to ...
- Libgdx 开发指南(1.3) 应用框架——查询、日志
查询 Application接口提过多种方法查询运行时环境属性. 获得应用类型 有时候根据运行平台需要处理一些具体的逻辑,可以使用 Application.getType() 方法来返回应用所运行的平 ...
- H5实现俄罗斯方块（四）
图片加载的js: (function (window) { 'use strict'; //定义缓存的Map对象 var cacheMap = new Map(); //资源的总数量 var reso ...
- MVC 3.0 上传多张图片到服务器
View关键代码: @using (Html.BeginForm("Create", "Activity", FormMethod.Post, new { en ...
- SQL 变量
1.变量可以暂时储存数据 --定义变量: declare @xxx int --变量赋值: set @xxx=1 select @xxx=3 --变量的使用: print @xxx 2.--全 ...
- JSP 动作元素
JSP动作元素 1. 动作元素分类 用来动态的包含文件.网页跳转及使用JavaBean组件等. 语法:<jsp:XXX />或者<jsp:XXX></jsp:XXX&g ...
- 【转载】知乎答案----孙志岗----Google 发布了程序员养成指南，国内互联网巨头是否也有类似的指南和课程推荐
国内公司在复制国外商业模式的同时,也应复制人家的社会担当.所以,来答题了!就参考 Google 的框架,列一下中文的课程.大体上在线学完一个计算机专业,是基本不成问题的.但是,这不意味着你可以不上大学 ...