在框架7 Web应用程序中制作引导程序模式

Question

我在将引导程序模式引入到framework7应用程序时遇到问题。

我怀疑framework7正在抑制boostrap模态出现。

这是我的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. 重新命令bootstrap/framework7 CSS + JS以在引导后放置framework7（以便在必要时framework7覆盖引导程序）。
3. 将myModal div放在代码的末尾，以便其父Z-index不会被母公司div的较低Z-index阻止。
4. 添加一些自定义CSS以使模式正确显示。这是必要的，因为使用了两个框架。

下面是最终代码：

#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>

更新小提琴here