-1

单击链接时，我需要创建一个弹出窗口，并且需要能够使用弹出窗口右上角的 x 关闭弹出窗口。

这是我的 HTML：

<div id="popup_box">    <!-- PopupBox DIV-->
    <a id="popupBoxClose">Close</a>    
</div>

这是CSS：

#popup_box { 
    display:none; /* Hide the DIV */
    position:fixed;  
    _position:absolute; /* hack for internet explorer 6 */  
    height:600px;  
    width:850px;  
    left: 300px;
    text-align: center;
    top: 150px;
    z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 15px;  

    /* additional features, can be omitted */

    padding:15px;  
    font-size:15px;  
    -moz-box-shadow: 0 0 5px #ff0000;
    -webkit-box-shadow: 0 0 5px #ff0000;
    box-shadow: 0 0 5px #ff0000;
}
#popupBoxClose {
    font-size:20px;  
    line-height:15px;  
    right:5px;  
    top:5px;  
    position:absolute;  
    color:#6fa5e2;  
    font-weight:500;

这是我的 JavaScript：

<script type="text/javascript">
function myFunction() {

        loadPopupBox();

        $('#popupBoxClose').click( function() {            
            unloadPopupBox();
        });

        $('#container').click( function() {
            unloadPopupBox();
        });

        function unloadPopupBox() {    // TO Unload the Popupbox
            $('#popup_box').fadeOut("slow");
            $("#container").css({ // this is just for style        
                "opacity": "1"  
            }); 
        }    

        function loadPopupBox() {    // To Load the Popupbox
            $('#popup_box').fadeIn("slow");
            $("#container").css({ // this is just for style
                "opacity": "0.3"  
            });         
        }

这就是我所说的：

<a href="#" onclick="myFunction()">by server chart</a>

popupclosebox 正在从 div 中消失，它在我做 antying 之前就消失了。是否可以将 popupclosebox 放置在 div 之外以便我可以看到它？

4

2 回答 2

1 
$("#popupBoxClose, #container").on("click", function(){
    $("#popup_box").fadeOut();
});
于 2013-07-10T19:01:47.047 回答
1

您使用了 .fadeIn ，它将显示任何带有标准 CSS 的 DIV。如果您想使用集成对话框（带有 X 按钮），您应该使用 .dialog。这是参考链接：

http://jqueryui.com/dialog/

于 2013-07-10T19:02:41.580 回答