JQuery弹出炫丽对话框，背景变灰色

最新推荐文章于 2022-11-19 18:22:02 发布

Start20131218

最新推荐文章于 2022-11-19 18:22:02 发布

阅读量2.5k

点赞数

分类专栏： java web 文章标签： JQuery 弹出炫丽对话框背景变灰色

本文链接：https://blog.csdn.net/cs19920/article/details/18076765

版权

java web 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

这段时间在做开发时，用到了JQuery弹出炫丽对话框，背景变灰色。特地和大家分享分享。

先看效果图：

代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<title>JQuery弹出框，背景变灰色</title>
<script type="text/javascript">
$(document).ready(function(e) {
    $( "#reviews" ).bind('click',function(event) {
   $( "#checkandPass" ).dialog({
       autoOpen: true,
       width: 765 ,
       show: "blind",
       hide: "explode",
       modal: true,//设置背景灰的
   });
   $( "#checkandPass" ).dialog( "open" );
   return true;
});
});
</script>
</head>

<body>
   <div>
       <input type="button"id="reviews"value="Click me"/>
    </div>
   <div id="checkandPass" title="审核意见" style="display: none;">
       <form id="passideas_true" method="post" enctype="multipart/form-data" >
           <div>
               <textarea style="width:100%;height:90%;min-height: 100px;"></textarea>
           </div>
           <div style="margin-top: 20px;text-align: center;">
               <button style="height:30px;width:80px;" type="button" id="upfpass_true" >确定</button>
               <button style="height:30px;width:80px;" id="sb">取消</button>
           </div>
       </form>
    </div>
</body>
</html>