使用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 ...
Valid Sudoku
理解题目的意思后这题不难.扫描一遍数独输入并按照要求进行判断就可以了.提交了两次,第一次用了stl的set,第二次本来想借助位运算的,想想觉得有些操作略显麻烦,因此用整数数组代替.代码如下: 解法一: ...
hybrid app 简介
Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”. Hyb ...
linux命令：head
1.命令介绍: head用来显示文件的开头的一部分. 2.命令格式: head [选项] 文件 3.命令参数: -q 隐藏文件名 -v 显示文件名 -c<字节> 显示字节数 -n<行 ...
HDU5127 神坑题---vector 、 list 、 deque 的用法区别
题意:三个操作 1 a b : 队列中加入(x = a, y = b); -1 a b : 队列中减去(x = a, y = b); 0 p q :从队列的数对中查询哪一对x,y能够让 p * ...
不同vlan之间的相互访问
拓扑图: 用到的命令: 给端口的vlan <sw1>用户模式切换到系统模式 system-view 交换机名称 sysname swj1 创建vlan 3 端口模式选择int g0/0/ ...
机器学习（一）从一个R语言案例学线性回归
写在前面的话按照正常的顺序,本文应该先讲一些线性回归的基本概念,比如什么叫线性回归,线性回规的常用解法等.但既然本文名为<从一个R语言案例学会线性回归>,那就更重视如何使用R语言去解决线 ...
RouteArea中AreaPrefix(Area 前缀)的使用
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
popToViewController和dismissviewcontroller的用法
如果我们有ABC三个controller 1.使用present从A到B.再present到C.如果我们想从C直接回到A的话.直接使用 self dismissViewControllerAnima ...
《统计推断（Statistical Inference）》读书笔记——第2章变换与期望
第二章引入了两个重要问题,随机变量的期望和随机变量的变换.期望又引申出“矩”的概念,矩是统计学理论分析的一个重要关键词,而随机变量的变换是研究复杂统计现象的重要工具.下面是这一章的思维导图

使用CSS和jQuery实现对话框

使用CSS和jQuery实现对话框的更多相关文章

随机推荐

热门专题