JQuery彈出炫麗對話框的同時讓背景變灰色
更新時間：2014年05月22日 17:11:57 作者：
這篇文章主要介紹JQuery實現(xiàn)彈出炫麗對話框的同時讓背景變灰色效果,需要的朋友可以參考下
這段時間在做開發(fā)時，用到了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,//設(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>
保證是你要的效果。
先看效果圖：
代碼如下：
復(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>
保證是你要的效果。
您可能感興趣的文章:
- jQuery Mobile的loading對話框顯示/隱藏方法分享
- jquery刪除提示框彈出是否刪除對話框
- jQuery UI庫中dialog對話框功能使用全解析
- JQuery實現(xiàn)自定義對話框的代碼
- Jquery實現(xiàn)頁面加載時彈出對話框代碼
- 用JQuery 實現(xiàn)的自定義對話框
- jquery 模式對話框終極版實現(xiàn)代碼
- 6款經(jīng)典實用的jQuery小插件及源碼(對話框/提示工具等等)
- 自己使用js/jquery寫的一個定制對話框控件
- jQuery Dialog對話框事件用法實例分析
- jQuery實現(xiàn)時尚漂亮的彈出式對話框?qū)嵗?/a>
- jQuery實現(xiàn)定時隱藏對話框的方法分析
相關(guān)文章
本篇文章主要介紹了jquery easyui如何實現(xiàn)格式化列 ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
非常簡單的一句話即可實現(xiàn)，大家可以看看。2009-04-04
本文主要講訴了本人制作一個jquery焦點圖切換的簡易插件的過程，十分的詳細(xì)，希望對大家能有所幫助2014-08-08
這篇文章主要介紹了EasyUI，點擊開啟編輯框，并且編輯框獲得焦點的方法,需要的朋友可以參考下2015-03-03
jQuery Autocomplete簡介_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了jQuery Autocomplete簡介，jQuery UI Autocomplete是jQuery UI的自動完成組件，是我用過的最強大、最靈活的Autocomplete，它支持本地的Array/JSON數(shù)組、通過ajax請求的Array/JSON數(shù)組、JSONP、以及Function(最靈活)等方式來獲取數(shù)據(jù)2017-07-07
當(dāng)頁面打開時我們需要執(zhí)行一些操作，下面為大家介紹三種不錯的方法，大家可以參考下2014-06-06
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)簡單彈幕效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
jquery實現(xiàn)效果比較好的table選中行顏色
這篇文章主要介紹了jquery table選中行顏色實現(xiàn)代碼,需要的朋友可以參考下2014-03-03
jquery應(yīng)用實例分享_實現(xiàn)手風(fēng)琴特效
下面小編就為大家分享一篇jquery應(yīng)用實例_實現(xiàn)手風(fēng)琴特效的示例代碼。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了jquery向上向下取整適合分頁查詢及四舍五入,需要的朋友可以參考下2014-09-09