jQuery学习笔记(2)----用jquery实现各种模态提示框

来源：互联网发布：电信端口扩容10天解决编辑：程序博客网时间：2024/06/05 08:34

好久以来就想实现一个模态的框框，找了很多的jquery插件，都没有碰到自己满意的，这次碰到了一个，但是由于还处于开发阶段吧，连个文档API都没有，自己摸索了好长一段时间才搞定。

先来看看代码，本人看着源代码定制了自己想要的效果：

<%@ page language="java"contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><title>JQueryMagicDialog 的基本使用</title><link href="./css/default.css"type="text/css" rel="stylesheet"><link href="./css/default(1).css"type="text/css" rel="stylesheet"><script type="text/javascript"src="./js/jquery.js"></script><script type="text/javascript"src="./js/cn.js"></script><script type="text/javascript"src="./js/magicDialog/core.js"></script><script type="text/javascript"src="./js/ui.js"></script><script type="text/javascript"src="./js/global.js"></script><script type="text/javascript"src="./js/magicDialog/dialog.js"></script><script type="text/javascript"src="./js/ga.js"></script><style type="text/css">    #btn{    position:absolute;    top: 50px;    left: 250px;    }</style><script type="text/javascript">$(function(){$('.dlgDemoBtn').click(function(){    var el = $(this), act = el.attr('action');    switch(act){       case 'basic':           $('<div></div>').mac('dialog',{              title: '提示',              model: true,              autoOpen: true,              width: 200,              draggable: true,              el: '<p>你点击了我！</p>'           });           break;       case 'extended':           mac.opendlg({              title: '提示',              message: '按下 {0} 可关闭窗口.',              params: ['<b>ESC/Enter</b>'],              buttons: [{                  text: '确认',                  click: function(d){                     d.close();                  }              }]           });           break;       case 'wait':           var h = mac.wait('3秒后此窗口自动关闭');           window.setTimeout(function(){              h.close();           }, 3000);           break;       case 'alert':           mac.alert('Hello!');           break;       case 'confirm':           mac.confirm('<p>你确认吗?</p>', function(){              alert('You clickedyes!');           }, null);           break;       case 'customize':           mac.confirm('<p>你确认吗？</p>', null, null, [{              text: '关闭',              click: function(d){                  d.close();              }           },{              text: '确认',              click: function(d){                  d.close();              }           }]);           break;    }});});</script></head><body>    <div id="btn">       <button class="dlgDemoBtn"action="basic">Basic</button>       <button class="dlgDemoBtn"action="extended">Extended</button>       <button class="dlgDemoBtn"action="wait">Spinner</button>       <button class="dlgDemoBtn"action="alert">Alert</button>       <button class="dlgDemoBtn"action="confirm">Confirm</button>       <button class="dlgDemoBtn"action="customize">Customize</button>    </div></body></html>

整个项目构架如下图所示：

其中，css文件夹，images文件夹下放着所需要的css文件与图片，而js文件夹下放着所需要的js文件，别看这么多，后续还有很多功能需要这些文件，实现模态提示框只是其中的一个小功能，即magicDialog文件夹下的文件。

好了，运行dialogDemo.jsp文件，页面如下所示：

贴出几个效果吧！

点击“Basic”：

点击“Spinner”：

点击“Customize”：

总体来说，还是挺不错的一个插件，在IE9与Chrome浏览器下测试均没问题，只不过弹出框在Chrome浏览器下支持拖动，在IE9下却不支持。

具体源文件请参考官网：http://boarsoft.com/cn/，里面有很多其他的例子，后续本人会一一尝试下。

这是本人学习的结果，允许转载，欢迎交流，但转载务必给出本文章的链接地址：http://blog.csdn.net/youqishini/article/details/8043119，谢谢~