0

ダイアログボックスをポップアップする必要がある数秒後に、背景が画面に表示されます。

現在のコードは一種のスプラッシュです。しかし、リフレッシュするのではなく、数秒後にポップアップが必要です。

これが私のコードです

<!DOCTYPE html>
<html>
<head>
<title>Apple</title>
<!-- the three things that jQuery Mobile needs to work -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <style>
        /* App custom styles */

.text-align-center {
 text-align: center;
 }
.text-align-right {
 text-align: right;
}

.ui-content {
 margin-top: 200px;
}

.ui-page {
background : transparent url(http://i45.tinypic.com/abc.jpg) 0 0 no-repeat !important;
background-size : cover;
}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
    </script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
    </script>
   <!-- <script type="text/javascript" src="mobiledetect.js"></script>*/ -->

   <script type="text/javascript">

        $(document).bind("mobileinit", function()
        {
            $.mobile.defaultPageTransition = "fade";
        });
       $('div[data-role|="page"]').live('pageshow', function(event){
              var nextPage = $($(this).attr('NextPage'));
              setTimeout(function(){
            $.mobile.changePage(nextPage);
              }, 1000);
        });
    </script>

</head>
<body>

<div data-role="page" data-theme="b" id="splash" NextPage='#iphonepage' style="background-color: #fff;"> 
    <div class="splash">        
    </div>
</div>

<!-- This is the first page -->
 <section id="iphonepage" data-theme="b" data-role="dialog" style="margin-top: 0.5px !important" style="font-size: 12px !important;">
     <div data-role="content">
            <div>
                <h1 class="text-align-center">
                    <b>
                        Apple
                    </b>
                </h1>
                <br />
            </div>


            <a data-role="button" href="http://m.apple.com">
                Go
            </a>
        </div>

</section>

</p>

4

0 に答える 0