使用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没 ...
随机推荐
- jsp里边下载文件
//Tomcat下需要这两个//out.clear();//out=pageContext.pushBody(); //weblogic下加上会报错 response.reset();// 清空输出流 ...
- Linux摄像头驱动学习之：（三）从零写虚拟驱动（仿照vivi.c）
本篇仿照vivi.c 写虚拟视频驱动,代码(myvivi.c+fillbuf.c+Makefile)如下: //==========================myvivi.c========== ...
- 排序小结(C++版)
一.快速排序 #include <iostream> using namespace std; int adjust(int a[],int start,int end) { int i, ...
- 【matlab】MATLAB程序调试方法和过程
3.8 MATLAB程序的调试和优化 在MATLAB的程序调试过程中,不仅要求程序能够满足设计者的设计需求,而且还要求程序调试能够优化程序的性能,这样使得程序调试有时比程序设计更为复杂.MATLAB ...
- HiveQL(HiveSQL)跟普通SQL最大区别一直使用PIG，而今也需要兼顾HIVE
HiveQL(Hive SQL)跟普通SQL最大区别 一直使用PIG,而今也需要兼顾HIVE.网上搜了点资料,感觉挺有用,这里翻译过来.翻译估计不太准确,待自己熟悉HIVE后再慢慢总结. * No t ...
- Java中多态、抽象类和接口
1:final关键字(掌握) (1)是最终的意思,可以修饰类,方法,变量. (2)特点: A:它修饰的类,不能被继承. B:它修饰的方法,不能被重写. C:它修饰的变量,是一个常量. (3)面试相关: ...
- 关于HTTP的几种
301.404.200.304等HTTP状态,代表什么意思? 如果某项请求发送到您的服务器要求显示您网站上的某个网页(例如,用户通过浏览器访问您的网页或 Googlebot 抓取网页时),服务器将会返 ...
- crackme1.exe解密过程
那今天呢 在西普的做题过程中,发现这么一款.exe,我们来破解一下(当然不是简单的强制爆破,不是简单的打补丁) 我们先用PE 看看 它是用什么写的 有没有加壳什么的 很好 是VC6 ...
- 无需输入密码的scp/ssh/rsync操作方法
一般使用scp/ssh/rsync传输文件时,都需要输入密码.下面是免密码传输文件的方法. 假设要在两台主机之间传送文件,host_src & host_dst.host_src是文件源地址所 ...
- PlayerLog.lua --玩家登录通告
print(">>Script: Player Log Message.") --CLASS 职业 --战士 --圣骑士 --猎人 --盗贼 --牧师 --死亡骑士 - ...