欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery弹出炫丽对话框的同时让背景变灰色

程序员文章站 2023-11-10 15:34:46
这段时间在做开发时,用到了jquery弹出炫丽对话框,背景变灰色。特地和大家分享分享。 先看效果图:   代码如下: . 代码如下:

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

先看效果图:
JQuery弹出炫丽对话框的同时让背景变灰色 
代码如下:

. 代码如下:


<html xmlns="https://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>
<p>
<input type="button"id="reviews"value="click me"/>
</p>
<p id="checkandpass" title="审核意见" style="display: none;">
<form id="passideas_true" method="post" enctype="multipart/form-data" >
<p>
<textarea style="width:100%;height:90%;min-height: 100px;"></textarea>
</p>
<p 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>
</p>
</form>
</p>
</body>
</html>


保证是你要的效果。