使 bootstrap 模式在 framework7 网络应用程序中工作

Question

我在将 bootstrap 模式添加到 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>

谁能给我一些错误的指示？没有错误信息。感谢 feedback/advice 解决此问题。

Answer 1

我已经做了一些修改来纠正问题：

删除了 modal.min.js。这是导致模态再次打开和关闭的问题。
重新排序 bootstrap/framework7 CSS + JS 将 framework7 放在 bootstrap 之后（以便 framework7 在必要时覆盖 bootstrap）。
将 myModal div 放在代码末尾，这样它的 z-index 就不会被父级 div 的较低 z-index 阻塞。
添加一些自定义 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>

已更新 fiddle here

使 bootstrap 模式在 framework7 网络应用程序中工作

Making bootstrap modal work in a framework7 web app

css

twitter-bootstrap

html-framework-7