JQuery彈出炫麗對(duì)話框的同時(shí)讓背景變灰色

更新時(shí)間：2014年05月22日 17:11:57 作者：

這篇文章主要介紹JQuery實(shí)現(xiàn)彈出炫麗對(duì)話框的同時(shí)讓背景變灰色效果,需要的朋友可以參考下

這段時(shí)間在做開發(fā)時(shí)，用到了JQuery彈出炫麗對(duì)話框，背景變灰色。特地和大家分享分享。

先看效果圖：

代碼如下：

復(fù)制代碼代碼如下:

 
<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,//設(shè)置背景灰的 
}); 
$( "#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> 

保證是你要的效果。

您可能感興趣的文章:

相關(guān)文章

jQuery.buildFragment使用方法及思路分析
jQuery.buildFragment使用方法與思路分析以及源碼注釋分析等等，感興趣的朋友可以了解下哦
2013-01-01
JQuery事件冒泡和默認(rèn)行為代碼實(shí)例
這篇文章主要介紹了JQuery事件冒泡和默認(rèn)行為代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-05-05
判斷一個(gè)對(duì)象是否為jquery對(duì)象的方法
在用jquery的each做循環(huán)遍歷的時(shí)候常常會(huì)使用到this，要使用jquery的方法前提此對(duì)象必須是jquery對(duì)象，下面為大家介紹下jquery對(duì)象的判斷方法
2014-03-03
jQuery實(shí)現(xiàn)的仿百度,仿谷歌搜索下拉框效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的仿百度,仿谷歌搜索下拉框效果,結(jié)合實(shí)例形式分析了基于jQuery的鼠標(biāo)事件響應(yīng)與頁面元素動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下
2016-12-12
使用CamanJS在Web頁面上處理圖像的技巧
CamanJs庫(kù)用于個(gè)人項(xiàng)目中進(jìn)行使用的圖形操作庫(kù)，這個(gè)庫(kù)是基于JavaScript的canvas操作庫(kù)，接下來，通過本篇文章給大家詳細(xì)介紹使用CamanJS在Web頁面上處理圖像的技巧，需要的朋友一起來學(xué)習(xí)下
2015-08-08
jQuery選擇器簡(jiǎn)明總結(jié)（含用法實(shí)例,一目了然）
jQuery 選擇器一直是 jquery 最神秘，最強(qiáng)大的一部分，當(dāng)然也是整個(gè) jquery 里面非?；A(chǔ)的
2014-04-04
詳解bootstrap用dropdown-menu實(shí)現(xiàn)上下文菜單
這篇文章主要介紹了詳解bootstrap用dropdown-menu實(shí)現(xiàn)上下文菜單的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下
2017-09-09
Javascript 驗(yàn)證上傳圖片大小[客戶端]
在做上傳圖片的時(shí)候，如果不限制上傳圖片大小，后果非常的嚴(yán)重。那么我們?cè)鯓硬趴梢越鉀Q一個(gè)棘手的問題呢？
2009-08-08
jQuery返回定位插件詳解
本篇文章主要介紹了jQuery返回定位插件的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-05-05
JQuery在循環(huán)中綁定事件的問題詳解
下面小編就為大家?guī)硪黄狫Query在循環(huán)中綁定事件的問題詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06