jQuery插件simple greybox简单灰箱实现javascript禁用全页面功能

有时候在程序设计中需要实现禁示全页面功能,如弹出一个对话框,禁用其它页面功能,实现一个灰箱效果,jQuery插件simple greybox简单灰箱可实现javascript禁用全页面功能,使用非常方便,使用实例如下:

simple-greybox

使用说明
需要使用jQuery库文件simple greybox库文件
需要自定义灰箱CSS样式

使用实例
一,包含文件部分

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="jquery.gbx_show.js"></script>

二,HTML部分

  1. <a href="#" id="ex1Act">simple greybox简单灰箱实例</a>
  2. <div id="biuuu">
  3. jQuery插件simple greybox简单灰箱实例
  4. <a href="#" id="close">关闭</a>
  5. </div>

三,javascript部分

  1. <script type="text/javascript" language="JavaScript">
  2. $(document).ready(function() {
  3. $("#biuuu").gbx({
  4. left:0,
  5. width:629,
  6. border:"1px solid red"
  7. });
  8. $("#ex1Act").click(function() {
  9. $().gbx.show('biuuu');
  10. return false;
  11. });
  12. $("#close").click(function() {
  13. $().gbx.hide('biuuu');
  14. return false;
  15. });
  16. });
  17. </script>

上面实例中,jQuery插件simple greybox给需要实现灰箱的DIV增加CSS样式,同时有两个CLICK事件,一个弹出灰箱按钮和一个关闭灰箱按钮,非常简单,实现一个弹出新窗口禁用全页面的功能。

点我查看jQuery插件simple greybox简单灰箱实现javascript禁用全页面功能演示