在jquery mobile中添加弹出窗口

Question

我已经在我的网站中添加了这样的列表；

   <ul>
      <li><a href="#Video">Video</a></li>
   </ul>

目前，当用户单击此按钮时，视频页面会打开，但是，我想做的是，在视频页面打开的同时，我还想添加一个弹出窗口，说“这是视频页面”。

我在网上搜索过，但似乎找不到任何我需要的东西，我找到了这个，但我似乎无法将我的列表与此代码集成；

<a href="#popupBasic" data-rel="popup">Open Popup</a>

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

另外，如果可能的话，我希望弹出窗口在一定时间后自动关闭，例如3 秒

我试过了，但只打开了第一个链接；

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

   <ul>
      <li><a href="#popupBasic" data-rel="popup" href="#Video">Video</a></li>
   </ul>

Answer 1

这使用 jquery ui 来完成你想要的。它会弹出一个对话框，等待 3 秒，然后在 3 秒后关闭它

JSFiddle：jsfiddle.net/mcf2280/tbyuys9w/7/

    $(function() {
        $("#popupBasic").dialog({ autoOpen: false });
        $(".navButton").click(function() {
            var text = $(this).text();
            $("#popupBasic").html('<p>'+text+'</p>');
            $("#popupBasic").dialog('open')
            window.setTimeout(closeAlert, 3000);
        });
        function closeAlert(){
            $("#popupBasic").dialog('close');
        } 
    });