在jQuery Mobile中，如何在出現5秒後關閉彈出窗口？

我有一個彈出現在出現，我只是想顯示彈出式5秒鐘，然後將其關閉，但我不知道該怎麼添加以下代碼：在jQuery Mobile中，如何在出現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>

來源

2012-10-31 fakeguybrushthreepwood

你試過用'setTimeout'嗎？ –

你有沒有嘗試使用的setTimeout（），可能...

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

來源

2012-10-31 07:56:03

道歉，但我是新的jQuery Mobile - 我會在$（document）.ready（function（）{}中添加這個嗎？ – fakeguybrushthreepwood

@ u1sonderzug：是的 –

我試過這個但現在彈出窗口根本沒有出現 – fakeguybrushthreepwood

看到修改後的例子，並再次把你的腳本進入人體

<!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-31 19:18:03 Taifun

在Chrome中，這似乎關閉了整個窗口/選項卡，並且在Safari中不起作用，不知道爲什麼！它看起來應該起作用！ – fakeguybrushthreepwood

加上延遲100ms，打開彈出窗口，現在它可以在Firefox Nightly和Chrome上使用... – Taifun

彈出式窗口出現在Chrome中，但整個頁面在指定時間結束時變爲空白 – fakeguybrushthreepwood

在jQuery Mobile中，如何在出現5秒後關閉彈出窗口？

回答

相關問題