3

我现在出现了一个弹出窗口，我只想显示弹出窗口 5 秒钟然后关闭它，但我不确定要添加到以下代码中的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> 
<head> 
    <title>popup</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset= ISO-8859-5">
    <script>
    $(document).ready(function () {
        $("#popupBasic").popup();
        $("#popupBasic").popup("open");
    });
    </script>
</head> 
<body> 

<div data-role="page">
    <div data-role="content">   
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices, odio vitae mollis gravida, magna augue fringilla dui, id consectetur purus enim vitae erat. Praesent aliquet imperdiet nibh quis pretium. Cras condimentum, purus at auctor ullamcorper, nunc massa congue metus, sed imperdiet leo dolor vel odio. Quisque at leo mi, et vulputate urna. Sed facilisis porta posuere. Maecenas justo velit, pharetra id pellentesque commodo, semper non leo. Aenean ut lobortis risus. Nulla enim libero, posuere eu dapibus sed, commodo at lacus. Praesent at eros arcu.</p>
    <p>In consectetur porttitor convallis. Quisque volutpat laoreet commodo. Praesent eu justo volutpat lacus aliquet consequat eget et enim. Morbi molestie ipsum non velit molestie condimentum. Quisque dolor elit, fermentum vestibulum pellentesque vel, molestie quis elit. Phasellus quis dolor at nisl hendrerit volutpat ac non nunc. Maecenas sed turpis lorem. Suspendisse imperdiet imperdiet dictum. Pellentesque tincidunt purus vitae leo hendrerit at auctor sem lobortis. Suspendisse sapien tellus, dignissim vel iaculis in, ornare a erat. Donec placerat sollicitudin lectus, eu commodo turpis mollis a. Vestibulum et nisi neque, ac luctus purus.</p>
    <p>Curabitur in massa ultrices metus malesuada vehicula. Morbi vel purus enim, tincidunt tincidunt nulla. Nam rutrum tempus dapibus. Nulla adipiscing tristique dui ac posuere. Nunc vitae tortor in sapien suscipit scelerisque. Aliquam porttitor aliquam tortor tincidunt aliquet. Integer justo sapien, pulvinar et commodo eu, congue at diam. Suspendisse porta nulla nec lectus porttitor molestie. Duis lacus velit, molestie et pharetra et, viverra vitae risus. Duis pretium bibendum velit quis tempor.</p>
    </div>

    <div data-role="popup" id="popupBasic">
        <p>This is a completely basic popup, no options set.</p>
    </div>

</div>

</body>
</html>
4

2 回答 2

5

查看修改后的示例，然后再次将您的脚本放入正文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
        <title>popup</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset= ISO-8859-5">
    </head>
    <body>

      <div data-role="page" id="myPage">
        <div data-role="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultrices, odio vitae mollis gravida, magna augue fringilla dui, id consectetur purus enim vitae erat. Praesent aliquet imperdiet nibh quis pretium. Cras condimentum, purus at auctor ullamcorper, nunc massa congue metus, sed imperdiet leo dolor vel odio. Quisque at leo mi, et vulputate urna. Sed facilisis porta posuere. Maecenas justo velit, pharetra id pellentesque commodo, semper non leo. Aenean ut lobortis risus. Nulla enim libero, posuere eu dapibus sed, commodo at lacus. Praesent at eros arcu.</p>
          <p>In consectetur porttitor convallis. Quisque volutpat laoreet commodo. Praesent eu justo volutpat lacus aliquet consequat eget et enim. Morbi molestie ipsum non velit molestie condimentum. Quisque dolor elit, fermentum vestibulum pellentesque vel, molestie quis elit. Phasellus quis dolor at nisl hendrerit volutpat ac non nunc. Maecenas sed turpis lorem. Suspendisse imperdiet imperdiet dictum. Pellentesque tincidunt purus vitae leo hendrerit at auctor sem lobortis. Suspendisse sapien tellus, dignissim vel iaculis in, ornare a erat. Donec placerat sollicitudin lectus, eu commodo turpis mollis a. Vestibulum et nisi neque, ac luctus purus.</p>
          <p>Curabitur in massa ultrices metus malesuada vehicula. Morbi vel purus enim, tincidunt tincidunt nulla. Nam rutrum tempus dapibus. Nulla adipiscing tristique dui ac posuere. Nunc vitae tortor in sapien suscipit scelerisque. Aliquam porttitor aliquam tortor tincidunt aliquet. Integer justo sapien, pulvinar et commodo eu, congue at diam. Suspendisse porta nulla nec lectus porttitor molestie. Duis lacus velit, molestie et pharetra et, viverra vitae risus. Duis pretium bibendum velit quis tempor.</p>
        </div>

        <div data-role="popup" id="popupBasic">
          <p>This is a completely basic popup, no options set.</p>
        </div>

        <script>
          $( '#myPage' ).bind( 'pageinit',function(event){
            setTimeout(function(){
              $("#popupBasic").popup();
              $("#popupBasic").popup("open");
            }, 100);
            setTimeout(function(){
              $("#popupBasic").popup("close");
            }, 5000);
          });
        </script>
      </div>

    </body>
    </html>

编辑：现在为打开弹出窗口添加了 100 毫秒的延迟，现在它可以在 Firefox 和 Chrome 上运行......

于 2012-10-31T19:18:03.353 回答
3

您是否尝试过使用 setTimeout()，可能...

setTimeout(function() {
$("#popupBasic").popup("close");
}, 5000);​

于 2012-10-31T07:56:03.060 回答