Jquery UI 里的Dialog 参数

winnerfathot 2011-02-24 10:24:51

我想让 dialog 出现后，在不是dialog 区域内点击一下(已就是说失去焦点？)后，dialog 自动关闭....该怎么设置?

...全文

193 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

winnerfathot 2011-02-25

打赏
举报

[Quote=引用 4 楼 flyerwing 的回复:]
估计都那两下子,没什么意思了.
[/Quote]不是效果的问题，我现在这页面正需要这个效果。方便好用

flyerwing 2011-02-25

打赏
举报

估计都那两下子,没什么意思了.

winnerfathot 2011-02-25

打赏
举报

[Quote=引用 2 楼 wxr0323 的回复:]
你要的是这种效果么。

HTML code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>jquery</title>
<script type="text/javascript" src="js/jquer……
[/Quote]
对，就这种效果，可是我不会用javascript ,我希望用Jquery , Jquery UI 里的dialog 能不能实现啊。。

子夜__ 2011-02-24

打赏
举报

你要的是这种效果么。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>jquery</title>

<script type="text/javascript" src="js/jquery.js"></script>





<style type="text/css">



#dialog-overlay {



    /* set it to fill the whil screen */

    width:100%; 

    height:100%;

    

    /* transparency for different browsers */

    filter:alpha(opacity=50); 

    -moz-opacity:0.5; 

    -khtml-opacity: 0.5; 

    opacity: 0.5; 

    background:#000; 



    /* make sure it appear behind the dialog box but above everything else */

    position:absolute; 

    top:0; left:0; 

    z-index:3000; 



    /* hide it by default */

    display:none;

}





#dialog-box {

    

    /* css3 drop shadow */

    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

    

    /* css3 border radius */

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    

    background:#eee;

    /* styling of the dialog box, i have a fixed dimension for this demo */ 

    width:328px; 

    

    /* make sure it has the highest z-index */

    position:absolute; 

    z-index:5000; 



    /* hide it by default */

    display:none;

}



#dialog-box .dialog-content {

    /* style the content */

    text-align:left; 

    padding:10px; 

    margin:13px;

    color:#666; 

    font-family:arial;

    font-size:11px; 

}



a.button {

    /* styles for button */

    margin:10px auto 0 auto;

    text-align:center;

    background-color: #e33100;

    display: block;

    width:50px;

    padding: 5px 10px 6px;

    color: #fff;

    text-decoration: none;

    font-weight: bold;

    line-height: 1;

    

    /* css3 implementation :) */

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);

    border-bottom: 1px solid rgba(0,0,0,0.25);

    position: relative;

    cursor: pointer;

    

}



a.button:hover {

    background-color: #c33100;    

}



/* extra styling */

#dialog-box .dialog-content p {

    font-weight:700; margin:0;

}



#dialog-box .dialog-content ul {

    margin:10px 0 10px 20px; 

    padding:0; 

    height:50px;

}







</style>



<script type="text/javascript">



$(document).ready(function () {



    // if user clicked on button, the overlay layer or the dialogbox, close the dialog    

    $('a.btn-ok, #dialog-overlay, #dialog-box').click(function () {        

        $('#dialog-overlay, #dialog-box').hide();        

        return false;

    });

    

    // if user resize the window, call the same function again

    // to make sure the overlay fills the screen and dialogbox aligned to center    

    $(window).resize(function () {

        

        //only do it if the dialog box is not hidden

        if (!$('#dialog-box').is(':hidden')) popup();        

    });    

    

    

});



//Popup dialog

function popup(message) {

        

    // get the screen height and width  

    var maskHeight = $(document).height();  

    var maskWidth = $(window).width();

    

    // calculate the values for center alignment

    var dialogTop =  (maskHeight/3) - ($('#dialog-box').height());  

    var dialogLeft = (maskWidth/2) - ($('#dialog-box').width()/2); 

    

    // assign values to the overlay and dialog box

    $('#dialog-overlay').css({height:maskHeight, width:maskWidth}).show();

    $('#dialog-box').css({top:dialogTop, left:dialogLeft}).show();

    

    // display the message

    $('#dialog-message').html(message);

            

}



</script>



</head>

<body onload="popup('<p>You can pass html code to it as well:</p><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li></ul>')">



<a href="javascript:popup('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.')">Popup!</a>



<div id="dialog-overlay"></div>

<div id="dialog-box">

    <div class="dialog-content">

        <div id="dialog-message"></div>

        <a href="#" class="button">Close</a>

    </div>

</div>



</body>

</html>