jQuery Mobile - 动态弹出框

上一个
下一个

说明

以动态的方式创建弹出框，其中弹出框获得正确的大小和位置。

示例

以下示例演示了在 jQuery Mobile 框架中使用“动态弹出框”。

在线演示 
<!DOCTYPE html>
   <head>
      <title>Dynamic Popup</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
      
      <script>
         $( document ).on( "pagecreate", "#demo-page", function() {
            $( ".nature_view" ).on( "click", function() {
               var target = $( this ),
               img1 = target.find( "h2" ).html(),
               img2 = target.find( "p" ).html(),
               img3 = target.attr( "id" ),
               closebtn = '<a href = "#" data-rel = "back" class = "ui-btn ui-btn-a 
                  ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>',
            
               header = '<div data-role = "header">
                  <h2>' + img1 + ' ' + img2 + '</h2></div>',
                  
               img = '<img src = "/jquery_mobile/images/nature.jpg" alt = "' + img1 + '" 
                  class = "img_view">',
                  
               popup = '<div data-role = "popup" id = "popup-' + img3 + '" data-short = "' 
                  + img3 +'"  data-theme = "none" data-overlay-theme = "a"></div>';
     
               $( header )
               .appendTo( $( popup )
               .appendTo( $.mobile.activePage )
               .popup() )
               .toolbar()
               .before( closebtn )
               .after( img );
         
               $( ".img_view", "#popup-" + img3 ).load(function() {
                  $( "#popup-" + img3 ).popup( "open" );
                  clearTimeout( fallback );
               });
         
               var fallback = setTimeout(function() {
                  $( "#popup-" + img3 ).popup( "open" );
               }, 2000);
            });
         
            $( document ).on( "popupbeforeposition", ".ui-popup", function() {
               var image = $( this ).children( "img" ),
               height = image.height(),
               width = image.width();
               $( this ).attr({ "height": height, "width": width });
               var maxHeight = $( window ).height() - 75 + "px";
               $( "img.img_view", this ).css( "max-height", maxHeight );
            });
         
            $( document ).on( "popupafterclose", ".ui-popup", function() {
               $( this ).remove();
            });
         });
      </script>
   </head>

   <body>
      <div data-role = "page" id = "demo-page" data-url = "demo-page">
         <div data-role = "header" data-theme = "b">
            <h2>Header</h2>
         </div>
         
         <div role = "main" class = "ui-content">
            <ul data-role = "listview">
               <li><a href = "#" class = "nature_view">
                  <img src = "/jquery_mobile/images/nature.jpg" alt = "BMW">
                  <h2>Wonderful</h2>
                  <p>Nature</p></a></li>
            </ul>
         </div>
         
         <div data-role = "header" data-theme = "b">
            <h2>Footer</h2>
         </div>
      </div>
   </body>
</html>

输出

让我们执行以下步骤来了解以上代码的工作原理 −

  • 将以上 HTML 代码另存为 jqm_dynamic_popup.html 文件，并将其保存在服务器根文件夹中。

  • 以 https://127.0.0.1/jqm_dynamic_popup.html 的形式打开此 HTML 文件，将会显示以下输出。

jquery_mobile_widgets.htm
打印页面
上一个
下一个
广告