Question

所以我对jQuery很陌生，说实话，我不知道从哪里开始。

我想要什么 - 页面加载时的5秒计时器会触发页面内的弹出窗口。我希望它能够在屏幕中央弹出，并添加内容/风格但是我喜欢，理想情况是我自己的尺寸。褪色的背景也会很棒！但如果我问得太多，我就可以活下去。

我可以做计时器，但实际上只知道如何在里面添加警报......这并不是一个非常理想的结果。

我能做什么

    setTimeout(function() {
      alert ('Hello');
    }, 5000);

任何帮助或指导都会很棒！

谢谢：）

Answer 1

您是否听说过 jQuery UI ？

jQuery UI是jQuery的扩展，允许您添加对话框窗口，模态消息，手风琴，自定义按钮，日期选择器等内容。

https://jqueryui.com/dialog/#modal-message 这对你来说可能很有意思，因为对话框/弹出窗口......

我希望我可以帮助你。

Answer 2

你能做的就是使用Twitter Bootstrap，它可以构建模态功能。一旦弹出模态，背景也会消失。这是一些代码：

HTML：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

JS：

setTimeout(function () {
    $('#myModal').modal('show');
}, 5000);

JSFiddle：http://jsfiddle.net/Starfire1337/9aJYW/

Answer 3

这是一个非常粗略的例子，风格很小：

css：

 #target {
    display:none;
 }

js：

 setTimeout(function() {
     $('#target').show();
 }, 5000);

jsfiddle：http://jsfiddle.net/lharby/9GMZ7/

jQuery - 在页面弹出窗口中褪色的背景？

3 个答案: