Question

我现在有一个弹出窗口，我只想显示弹出窗口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>

Answer 1

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

<!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 ...

Answer 2

您是否尝试过使用setTimeout（），可能......

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

在jQuery Mobile中，如何在出现后5秒钟关闭弹出窗口？

2 个答案: