フレームワーク7ウェブアプリケーションでブートストラップモーダル作業を行う

Question

フレームワーク7アプリケーションにブートストラップモーダルを含める際に問題があります。

私はフレームワーク7がブーストラップモーダルの表示を抑制していると思われます。

これは私のfiddleです。

<div class="navbar"> 
    <div class="navbar-inner"> 
     <div class="left sliding"><a href="" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div> 
    <div class=""> 
     <span id="project_name" class="center sliding">Title</span> 
    </div> 
     <div class="right"> 
     <a id="create_task" style="">Create</a> 
     </div> 
    </div> 
</div> 

<div class="pages navbar-through "> 
    <div data-page="about" class="page no-toolbar page-on-center"> 
    <div class="page-content"> 

    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 


     <div class="content-block"> 
     <p>This project is made possible because of these open-source projects & beta testers.</p> 
     </div> 

     <div class="content-block-title">Open Source</div> 
     <div class="content-block"> 
     <div class="content-block-inner"> 
      <a href="http://framework7.io">Framework7</a> 
     </div> 

     <div class="content-block-inner"> 
      <a href="https://vuejs.org">Vuejs</a> 
     </div> 

     <div class="content-block-inner"> 
      <a href="http://rubyonrails.org">Ruby on Rails</a> 
     </div> 

     <div class="content-block-inner"> 
      <a href="http://fontawesome.io">Font Awesome</a> 
     </div> 

     <div class="content-block-inner"> 
      <a href="https://github.com/mzabriskie/axios">Axios</a> 
     </div> 

     <div class="content-block-inner"> 
      <a href="https://github.com/kaminari/kaminari">Kaminari</a> 
     </div> 

     <div class="content-block-inner"> 
      <a href="https://github.com/puma/puma">Puma</a> 
     </div> 
     </div> 

     <div class="content-block-title">Thanks to these beta testers</div> 
     <div class="content-block"> 
     <div class="content-block-inner"> 
      <li>John Doe</li> 
      <li>Nathan</li> 
      <li>Sharon days</li> 
     </div> 
     </div> 

     <div class="content-block-title">Logo</div> 
     <div class="content-block"> 
     <div class="content-block-inner"> 
      <b>Lau Jun Wen</b> 
     </div> 
     </div> 


     <!-- Trigger the modal with a button --> 

<!-- Modal --> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Modal Header</h4> 
     </div> 
     <div class="modal-body"> 
     <p>Some text in the modal.</p> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 

    </div> 
</div> 

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

誰かが間違っている点を指摘できますか？エラーメッセージはありません。これを解決するためにフィードバック/アドバイスを感謝します。

Answer 1

私は問題を修正するためにいくつかの変更を行いました。

1. はmodal.min.jsを削除しました。これはモーダルを開いたり閉じたりする問題でした。
2. ブートストラップの後にframework7を配置するように、ブートストラップ/ framework7 CSS + JSの順序を変更しました（必要に応じてフレームワーク7がブートストラップをオーバーライドするように）。
3. myModal divをコードの末尾に置くと、z-indexが親divのz-indexよりも低くブロックされないようにします。
4. カスタムのCSSを追加して、モーダル表示を正しく作成します。これは、2つのフレームワークを使用するために必要です。ここで

最終的なコードです：フィドルhere

更新

#myModal.modal { 
 
    width: auto; 
 
    margin-left: 0; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 1050; 
 
    display: none; 
 
    overflow: hidden; 
 
    -webkit-transform: translate3d(0,0,0) scale(1); 
 
    transform: translate3d(0,0,0) scale(1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.6.4/js/framework7.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/framework7/1.6.4/css/framework7.ios.min.css" rel="stylesheet"/> 
 

 
<div class="navbar"> 
 
    <div class="navbar-inner"> 
 
     <div class="left sliding"><a href="" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div> 
 
    <div class=""> 
 
     <span id="project_name" class="center sliding">Title</span> 
 
    </div> 
 
     <div class="right"> 
 
     <a id="create_task" style="">Create</a> 
 
     </div> 
 
    </div> 
 
</div> 
 

 
<div class="pages navbar-through "> 
 
    <div data-page="about" class="page no-toolbar page-on-center"> 
 
    <div class="page-content"> 
 
    
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 

 
     <div class="content-block"> 
 
     <p>This project is made possible because of these open-source projects & beta testers.</p> 
 
     </div> 
 

 
     <div class="content-block-title">Open Source</div> 
 
     <div class="content-block"> 
 
     <div class="content-block-inner"> 
 
      <a href="http://framework7.io">Framework7</a> 
 
     </div> 
 

 
     <div class="content-block-inner"> 
 
      <a href="https://vuejs.org">Vuejs</a> 
 
     </div> 
 

 
     <div class="content-block-inner"> 
 
      <a href="http://rubyonrails.org">Ruby on Rails</a> 
 
     </div> 
 

 
     <div class="content-block-inner"> 
 
      <a href="http://fontawesome.io">Font Awesome</a> 
 
     </div> 
 

 
     <div class="content-block-inner"> 
 
      <a href="https://github.com/mzabriskie/axios">Axios</a> 
 
     </div> 
 

 
     <div class="content-block-inner"> 
 
      <a href="https://github.com/kaminari/kaminari">Kaminari</a> 
 
     </div> 
 

 
     <div class="content-block-inner"> 
 
      <a href="https://github.com/puma/puma">Puma</a> 
 
     </div> 
 
     </div> 
 

 
     <div class="content-block-title">Thanks to these beta testers</div> 
 
     <div class="content-block"> 
 
     <div class="content-block-inner"> 
 
      <li>John Doe</li> 
 
      <li>Nathan</li> 
 
      <li>Sharon days</li> 
 
     </div> 
 
     </div> 
 

 
     <div class="content-block-title">Logo</div> 
 
     <div class="content-block"> 
 
     <div class="content-block-inner"> 
 
      <b>Lau Jun Wen</b> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
     
 
<!-- Trigger the modal with a button --> 
 

 
<!-- Modal --> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
    <!-- Modal content--> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>