Framework7-JavaScriptを使用したオーバーレイポップアップ

説明

JavaScriptコードを使用して、ポップアップを開いたり閉じたりできます。 _popup（popup）_メソッドを使用してポップアップモーダルを開き、_closeModal（popup）_メソッドを使用してポップアップモーダルを閉じることができます。

例

次の例では、Framework7でJavaScriptを使用してリンクをクリックすると、ポップアップが表示されます-

<!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 using JavaScript</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 using JavaScript</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 = "#" class = "first_page">Open First Page</a></p>
                        <p><a href = "#" class = "second_page">Open Second Page</a></p>
                     </div>
                  </div>
               </div>
            </div>

         </div>
      </div>

      <div class = "popup 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 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
         });

        //It will open popup when you click the link with class 'first_page'
         $$('.first_page').on('click', function() {
            myApp.popup('.popup-first_page');
         });

        //It will open popup when you click the link with class 'second_page'
         $$('.second_page').on('click', function() {
            myApp.popup('.popup-second_page');
         });
      </script>
   </body>

</html>

出力

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

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

Framework7-popup-using-javascript

Framework7-JavaScriptを使用したオーバーレイポップアップ

説明

例

出力