Framework7-HTMLからのオーバーレイポップアップ

説明

以下に示すように、クラスとデータ属性を使用してポップアップを開いたり閉じたりできます-

open-popup -ポップアップを開くために使用されます。
close-popup -ポップアップを閉じるために使用されます。
data-popup = "。my-popup" -アプリで複数のポップアップが使用される場合は常に、この属性を使用して適切なポップアップを指定する必要があります。

例

次の例では、クラスと属性を使用して、Framework7のHTMLからポップアップを表示します-

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1,
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui"/>
      <meta name = "apple-mobile-web-app-capable" content = "yes"/>
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black"/>
      <title>Popup from HTML</title>
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css"/>
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css"/>
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">

            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Popup from HTML</div>
               </div>
            </div>

            <div class = "pages">
               <div data-page = "index" class = "page navbar-fixed">

                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" data-popup = ".first_page" class = "open-popup">Open First Page</a></p>
                        <p><a href = "#" data-popup = ".second_page" class = "open-popup">Open Second Page</a></p>
                     </div>
                  </div>

               </div>
            </div>
         </div>
      </div>

      <div class = "popup first_page">
         <div class = "content-block">
            <p>First Page</p>

            <p> <a href = "#" class = "close-popup">Close popup</a></p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam
               ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus
               ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet
               congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac
               fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque,
               pellentesque nec metus id, congue elementum odio.</p>
         </div>
      </div>

      <div class = "popup second_page">
         <div class = "content-block">
            <p>Second Page</p>

            <p> <a href = "#" class = "close-popup">Close popup</a></p>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam
               ac quam euismod porta vel a nunc. Quisque sodales scelerisque est, at porta justo cursus
               ac. Integer vitae quam a ante lobortis lobortis. Nam vehicula sagittis quam, sit amet
               congue purus consequat sed. Maecenas eget mattis lectus. Aliquam luctus luctus leo ac
               fringilla. Sed nec eros vel purus tincidunt tincidunt in in orci. Sed tellus neque,
               pellentesque nec metus id, congue elementum odio.</p>
         </div>
      </div>

      <script type = "text/javascript"
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>

      <script>
        //Here you can initialize the app
         var myApp = new Framework7();

        //If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

        //Add the view
         var mainView = myApp.addView('.view-main', {
           //enable the dynamic navbar for this view:
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

上記のHTMLコードを popup_from_htmll ファイルとしてサーバーのルートフォルダーに保存します。
このHTMLファイルをhttp：//localhost/popup_from_htmllとして開くと、出力は以下のように表示されます。
最初のオプションをクリックすると、htmlからポップアップウィンドウが開き、最初のページが表示されます。
同様に、2番目のオプションをクリックすると、2番目のページのポップアップウィンドウが表示されます。
[ポップアップを閉じる]リンクをクリックして、ポップアップウィンドウを閉じることができます。

Framework7-popup-from-html

Framework7-HTMLからのオーバーレイポップアップ

説明

例

出力