Question

我有以下代码：我需要做的是能够点击下面的Div，完成后，＃info_page div会在屏幕中间显示几秒钟。就像一个对话框，但只是一个带有计时器的简单jquery temp show（）？这可能吗？

目前的代码如下。

<div onclick="show_info_box">Click to get message</div>


<div id="info_box" style="display:none">
<span class="custom info">
<img src="info.png" alt="info" height="48" width="48" />
<em>Information</em>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</span>
</div>

Answer 1

您需要在onclick代码中将show_info_box更改为show_info_box（），这是函数...

function show_info_box() {
    $("#info_box").show();
    setTimeout(function() {
        $("#info_box").hide();
    }, 5000);
}

如果您愿意，可以更改节目并隐藏fadeIn（）和fadeOut（）以获得更好的效果。

Answer 2

function show_info_box() {
   //Get info_box
   var info = $('div#info_box');
   //Fade the box in during 1 sec, show it for 5, and let it fade out again
   info.fadeIn(1000).delay(5000).fadeOut(1000);
}

我在这里给你一个有用的例子：http://jsfiddle.net/v5UdP/

请注意，您在onclick="show_info_box"处写了onclick="show_info_box()"。

Answer 3

您可以使用jQuery UI（http://jqueryui.com/demos/dialog/）及其对话框执行此操作，在对话框打开后设置超时以关闭它：

$(document).ready(function() {
    $("#info_box").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        open: function() {
            // close the dialog 10 secs after it's opened
            setTimeout(function() {
                $(this).dialog("close");
            }, 10000);
        }
    });

    // you'll need to set an ID on the DIV that you click
    $("#DIVID").bind("click", function() {
        $("#info_box").dialog("open");
    });
});

Answer 4

我希望您在此示例代码中使用内联事件（onclick=""），而不是在生产中，但无论如何......

function show_info_box() {
    var info_box = $('#info_box');
    info_box.show();
    setTimeout(function() {
        info_box.hide();
    }, 3000);
}

盒子的中心应该通过CSS完成。只需在框中放置position: absolute; width: 100%; height: 100%;包装，然后为框margin: auto。

Answer 5

$('.show_msg').bind('click', function(e) {
    //Stores overlay element
    var overlay = $("#info_box");
    //Position element in the center of the screen
    overlay.offset({'top': Math.ceil($(window).scrollTop() + ($(window).height() - overlay.outerHeight())/2),'left': Math.ceil(($(window).width() - overlay.outerWidth())/2)});
    //Show the overlay for 2 seconds
    overlay.fadeIn().delay(2000).fadeOut();
});

以下是一个基本示例：http://jsfiddle.net/WLYDe/1/。定位中心，但不使用对话框插件。

点击Div获取信息框几秒钟

5 个答案: