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

随机推荐

struts2 标签和 c标签的页面数据显示
用struts2 标签显示的页面代码 <s:if test="#request.employees == null || #request.employees.size() == 0& ...
HDU1016 dfs
刷回溯的时候发现我对DFS思路很不清晰,总是做着做着就乱了,刷个水题找找思路. 题意:经典DFS,找出所有的能让1~n的数形成素数环的序列(相邻相加为素数): #include <iostrea ...
oracle数据库解析json格式
随着非关系型数据大规模使用,以json格式产生的数据也出现在我所管理的Oracle数据库的CLOB字段里面,使用过程中就需要解析出指定键的值. 使用了最新版本如果Oracle版本为12.1.0.2的 ...
RestTemplate 请求url
1.get 请求 RestTemplate restTemplate = new RestTemplate(); String url = ""; JSONObject resul ...
odoo.cli.main()指的是哪里？OpenERP的第二根线头儿
接上回,odoo-bin中调用了odoo.cli.main(),去哪儿找? cli目录容易找跟随__init__.py的脚步 import logging import sys import os ...
关于 MAXScript 如何剪切文件夹
MAXScript 中可以对文件进行创建删除复制等操作但是唯独不能删除文件夹... 网上搜了一下批处理的剪切方法,在 MAXScript 里调用一下就好了 fn xcopy oldfile newfi ...
netmon，messageanalyzer
Microsoft Message Analyzer Operating Guide https://technet.microsoft.com/en-us/library/jj649776.aspx ...
mesos INSTALL
$ git clone https://github.com/mesosphere/playa-mesos $ cd playa-mesos $ vagrant up --provision
tomcat内存溢出 PermGen space
1. java.lang.OutOfMemoryError: PermGen space ---- PermGen space溢出. PermGen space的全称是Permanent Gene ...
android管理联系人操作
ContentProvider扩展之管理系统联系人我们都知道ContentProvider是用来共享数据的,然而android本身就提供了大量的ContentProvider,例如联系人信息,系统的 ...

使用CSS和jQuery实现对话框

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

随机推荐

热门专题