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 に答える