使用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没 ...

随机推荐

sql数据库管理处理问题--维护计划
问题:SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 MYPC/Administrator' 的信息,错误代码 0x534. [SQLSTATE 42000] ( ...
WIN7安装及配置JDK
1:什么是JDK? JDK是Java Development Kit 的简称,即Java开发工具包.JDK是ORACLE公司针对Java开发者的产品,提供了Java的开发环境和运行环境. 更多信息参看 ...
php大力力 [041节] 今天没有写日志哈
php大力力 [041节] 今天没有写日志哈如何下拉,左边的side颜色能顺延下去?? 今天做了一个表格显示
How to implement a custom type for NHibernate property
http://blog.miraclespain.com/archive/2008/Mar-18.html <?xml version="1.0" encoding=&quo ...
SqlServer性能优化（一）
一:数据存储的方式: 1.数据文件:.mdf或.ndf 2.日志文件:.ldf 二:事务日志的工作步骤: 1.数据修改由应用程序发出(在缓冲区进行缓存) 2.数据页位于缓存区缓冲中,或者读入缓冲区缓存 ...
sublime开发php必备工具集合(mac)
sublime开发php必备工具集合(Mac) 相关链接:http://benmatselby.github.io/sublime-phpcs/ 目标: 直接在sublime中运行php代码按PSR ...
tensorflow3
参考文献:tensorflow_manual_cn.pdf 一.tensorflow和caffe对应: graph-->.prototxt定义的网络结构 session-->solver( ...
js中有趣的闭包(closure)
一.变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
ExpandableListView的OnitemLongclickListener事件
expandableListView是带分组的Listview,通常会有setOnChildClickListener,setOnGroupClickListener,但如果是长按的事件,可以用以下方 ...
Android列出所有应用，点击可运行~
这个东西就比较容易了. MainActivity.class import android.app.Activity; import android.content.Context; import a ...

使用CSS和jQuery实现对话框

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

随机推荐

热门专题