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

JQuery弹出窗口（横幅）示例

1 个答案: