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

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

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

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

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

 

     

 如何恶如额四大佛教圣地疗法圣诞节方式打开了
    
        

           
这是弹框的内容---ifxoxo.com
        
   

    Open Dialog

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

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

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

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