JQuery 弹出窗口 window（横幅）示例

Question

我是新手，我正在尝试使用 jquery 创建弹出窗口 window，但我遇到了一些问题。例如，我需要带有广告的弹出窗口 window。它应该有关闭按钮，应该固定（在滚动页面时）并防止在外部点击关闭。所以我需要带有关闭按钮的弹出窗口 window，这将导致仅关闭此 window。
请给出一个实现的例子。我将不胜感激。
提前谢谢大家。

Answer 1

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

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

JQuery 弹出窗口 window（横幅）示例

JQuery popup window (banner) example

javascript

jquery

modal-dialog

popup

banner