文章/答案/技术大牛

发布

社区首页 >问答首页 >使引导模式在framework7 web应用程序中工作

问使引导模式在framework7 web应用程序中工作
EN

Stack Overflow用户

提问于 2017-08-13 11:11:39

回答 1查看 1.1K关注 0票数 1

我有问题，包括引导模式到一个framework7应用程序。

我怀疑framework7正在抑制启动模式的出现。

这是我的小提琴。

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

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

css

twitter-bootstrap

html-framework-7

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-08-16 02:40:16

为了纠正这些问题，我做了几处修改：

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

更新小提琴这里

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45659727

复制

相似问题

问使引导模式在framework7 web应用程序中工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使引导模式在framework7 web应用程序中工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使引导模式在framework7 web应用程序中工作
EN