JQuery弹出窗口(横幅)示例

Question

我是新手，我试图使用jquery创建弹出窗口，但我有一些问题。例如，我需要带有广告的弹出窗口。它应该有关闭按钮，应该是固定的(同时滚动页面)，并防止关闭点击外部。因此，我需要弹出窗口关闭按钮，这将导致关闭此窗口只。

请举例说明实施情况。我会很感激你的帮助。

提前谢谢大家。

Answer 1

下面是如何构建一个简单的弹出窗口的示例

HTML代码

<div id="shadowbox"></div>
<div id="banner">
    <div id="close">Close X</div>
</div>

<input type="button" id="click" value="open Banner"><br><br>
<input type="button" id="test" value="Click">

CSS

body {
    margin: 0;
    height: 1000px;
}

#shadowbox {
    position: fixed;
    z-index: 998;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.5);
}

#banner {
    position: fixed;
    z-index: 999;
    top: 100px;
    left: 50px;
    height: 360px;
    width: 720px;
    background: #FFF;
}

#close {
    position: absolute;
    top: 0px;
    right: 0px;
    font-family: Arial, Helvetica;
    font-size: 14px;
    color: #000;
    cursor: pointer;
    font-weight: bold;
}

JQuery

 $('#close').click(function() {
    $(this).parent().hide();
    $('#shadowbox').hide();
            //Function after window is closed 
            yourfunction(); 
});

//Your Function
function yourfunction() {
        alert('window has been closed');
}


$('#click').click(function() {
     $('#shadowbox, #banner').show();   
});

$('#test').click(function() {
    alert('Button was clicked');
})

http://codepen.io/anon/pen/MYBoRd