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>

有人可以给我一些关于错误的指示吗？没有错误消息。感谢任何反馈/建议来解决这个问题。

Answer 1

我做了几处修改来解决问题：

删除了modal.min.js。这是导致模态再次打开和关闭的问题。
重新命令bootstrap / framework7 CSS + JS在bootstrap之后放置framework7（以便在必要时frame7覆盖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>

更新了小提琴here

在framework7 web应用程序中制作bootstrap模式

1 个答案: