如何创建模态

时间:2016-07-23 14:15:07

标签: css modal-dialog

我是这个领域的新手并且正在尝试创建一个模态。我找到了这个模态:http://drublic.github.io/css-modal/#howto 但无法理解我的网页中包含哪些文件。我看到有很多不同的文件(SCSS,CSS和JS)和许多其他文件。 在编写标记并开始执行此任务之前,我应该包含哪些文件?

1 个答案:

答案 0 :(得分:0)

您可以使用Bootstrap模式。它们非常灵活,所需的功能最少。

        <button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
       <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

JsFiddle的外部资源链接中提供了必需的CSS和JS文件

您可以从 Here 找到更多帮助和信息,以下是一个有效的例子。

<强> Fiddle Example