基于jQuery的弹出框（背景同时灰掉）【原创】

来源：互联网发布：北京java学费编辑：程序博客网时间：2024/06/16 06:47

自从前两天头一个jQuery效果弄出来后，似乎对jQuery开始有点着迷了，恨不得现在把网站上布满jQuery特效。喜欢它，不单是因为它的效果漂亮，更关键的，是它的易于掌握和部署方便（代码量少）。

今天在看CSDN里一博友关于jQuery的一系列文章，头一篇说的是自由拖动，虽然效果有意思，但是，其实际意义呢？暂时未想到，所以，也就翻去下一页了。第二篇说的是弹出框，这很容易就让人联想到如今市面上铺天盖地，而且相当流行的弹出框应用--比如，点击某链接时，先弹出登录窗口；又比如点击进入新窗口支付时，原页面弹出窗口指示去向，原页面窗口背后的内容则一律灰掉，不允许再编辑；又比如新浪微博中，需要修改某个属性值时，弹出含有默认值输入框的对话框，修改提交后，原页面直接更新。。。啊，一想到这些，似乎就有点激动了。因为，在认识jQuery之前，也曾经在网上找过原生的js+css的写法，虽然也能实现，不过，貌似代码多了些，至今未实践采用过，永远只是个test。

在看完博友的这篇超级详细讲解的jQuery弹窗，再加上简单自行研究后，终于，弄出了个想要的效果了！对，网上流行的，就是它！

可以看到，点击open dialog按钮后，弹出basic dialog框，其中有按钮和叉可以关闭窗口。窗口打开时，背景内容被浅灰色笼罩，并且无法再选取到后面的文本，光标也无法停留到输入框中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="jquery-1.9.1.js"></script><script src="jquery-ui.js"></script><link href="jquery-ui.css" rel="stylesheet" /></head><body><script>          $(function() {       $( "#dialog" ).dialog({          autoOpen: false,          show: "blind",//打开时的效果设定          hide: "explode",//关闭时的效果设定  width: "480",  height:"300",  modal:"false",            buttons: {             "确认": function() {                    $(this).dialog("close");              },              "取消": function() {                    $(this).dialog("close");              }          }       });      $( "#opener" ).click(function() {          $( "#dialog" ).dialog( "open" );          return false;          });    });     </script>     <div id="content"> 如何恶如额四大佛教圣地疗法圣诞节方式打开了    <input name="" type="text" />        <div id="dialog" title="Basic dialog">           <p>这是弹框的内容---ifxoxo.com</p>        </div>   </div>    <button id="opener">Open Dialog</button></body></html>

这里面，dialog函数中的modal: false，是最神奇和最帅的地方！

另外，这里面要用到jQuery, jQuery-ul.js和jquery-ui.css三个东西。

jQuery-ul.js，是jquery的一部分类库，专门是用于UI交互类的应用的，加载之前，一定要先载入jQuery.js。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

jquery-ui.css，这是jquery官方出品的一套模版式的样式表。在官网上有专门这样一个地方，可以选择模版的样式表下载，还可以在线微调某些样式参数后再下载。看下图，啊啊啊！！！相见恨晚的日历控件啊！原来就是jQuery的杰作！其实早就在同事的应用和网上的许多应用中见到过的东东！下午研究！