JQuery彈出炫麗對話框,背景變灰色

這段時間在做開發時,用到了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>

保證是你要的效果。

下載地址:http://download.csdn.net/detail/cs19920/6832431

發佈了25 篇原創文章 · 獲贊 1 · 訪問量 9萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章