在jQuery Mobile中添加弹出窗口

Question

I have added a list in my website like this;

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

Currently, when the user click this button the video page opens, however, what I want to do is, along the video page opening up, I also want to add a pop, saying "This is the video page".

I have searched online but I can't seem to find anythiing that I need, I found this but I can't seem to intergrate my list with this code;

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

Also, if possible, I want the popup to close automatically after certain amount of time eg 3 seconds

I have tried this but only the first link opens;

<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

this uses jquery ui to accomplish what you want. it pops up a dialog waits 3 seconds then closes it 3 seconds later

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');
        } 
    });