我可以在没有 Bootstrap 的情况下制作 Modal 吗？

Question

我的任务是创建一个模式，但我被告知在此版本中我将无法使用 Bootstrap 库。是否可以在没有 Bootstrap 类的情况下构建模式？如果是这样，有人可以指导我一些文档吗？

这是我到目前为止所拥有的：

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel"><i class="fa fa-envelope"></i> </h4>
            </div><!-- modal-header -->
            <div class="modal-body">
                <p>Select the options below to get the right coverage type for you.</p>
                <form class="form-inline" role="form">
                    <div>

                    </div>
                </form>
            </div><!-- modal-body -->
        </div><!-- modal-content -->
    </div><!-- modal-dialog -->
</div><!-- modal -->

我的下一步是放在那里：

<div class="form-group"></div>

但这是一个 Bootstrap 类，有什么替代方案吗？

Answer 1

是否可以在没有 Bootstrap 类的情况下构建模式？

A modal 是一个覆盖层，可阻止用户与某些父内容交互。它不是 Boostrap 专有的，尽管 Bootstrap 使得通过添加 css 类来实现它变得非常容易。在下面，Bootstrap 使用 JQuery 来实现其大部分功能，包括模式。

您可以使用任何其他库来实现它例如Bulma，通过使用另一个使用jquery的框架，例如jqueryui，通过使用任何其他可以实现模式的javascript库，或者使用javascript来实现它，或者即使只有 css 和 html。

这是一个关于如何使用 javascript 和 css 创建模式的简单教程。

这个是一个关于如何在没有javascript、只有html5和css的情况下创建模式的教程。

如果您不希望您的代码依赖于任何第三方库（例如 jquery），这些教程非常有用。

如果您不想（或不能）使用 bootstrap，但可以使用 jquery，则可以按照

this 教程进行操作。

Answer 2

有这个 Jquery 插件，看一下：

https://jqueryui.com/dialog

Answer 3

Html部分

 <div class="demo-description">
   This page demonstrates a modal dialog without any third-party libraries. It uses only CSS + plain (vanilla) javascript.

   <ul>
      <li><a class="modal-toggle" data-target="openModal1">Open Modal window 1</a></li>
      <li><a class="modal-toggle" data-target="openModal2">Open Modal window 2</a></li>

      <li><button class="modal-toggle" data-target="openModal1">Open Modal window 1</button></li>
   </ul>
</div>

<div id="openModal1" class="modal-wrapper">
   <div class="modal">
      <a href="#close" title="Close" class="close">X</a>
      <div class="modal-header">
         <h2>Modal Box 1</h2>
      </div>
      <div class="modal-content">
         <p>Some text for selection</p>
      </div>
   </div>
</div>

<div id="openModal2" class="modal-wrapper">
   <div class="modal">
      <a href="#close" title="Close" class="close">X</a>
      <div class="modal-header">
         <h2>Modal Box 2</h2>
      </div>
      <div class="modal-content">
         <p>Some text for selection</p>
      </div>
   </div>
</div>

CSS 部分

    body {
   font-family: sans-serif;
   padding: 30px;
}
.demo-description {
   max-width: 460px;
   margin: 0 auto;
   line-height: 1.5;
}

.modal-toggle {
   cursor: pointer;
   color: #268bd2;
}
.modal-wrapper {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;

   background: rgba(0, 0, 0, 0.8);
   z-index: -1;
   opacity: 0;

   -webkit-transition: opacity 0.2s ease-in;
   -moz-transition: opacity 0.2s ease-in;
   transition: opacity 0.2s ease-in;

   pointer-events: auto;
}

.modal-wrapper > div {
   width: 460px;
   height: 40%;
   position: absolute;

   top: 0;
   bottom: 0;
   left: 0;
   right: 0;

   margin: auto;

   vertical-align: middle;
   padding: 20px;
   border-radius: 6px;
   background: #fff;
   z-index: 1;
}

.close {
   background: #606061;
   color: #ffffff;
   line-height: 25px;
   position: absolute;
   right: -12px;
   text-align: center;
   top: -10px;
   width: 24px;
   text-decoration: none;
   font-weight: bold;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
}

.close:hover {
   background: #00d9ff;
}

JAVASCRIPT

var cb = document.querySelectorAll(".close");
for (i = 0; i < cb.length; i++) {
   cb[i].addEventListener("click", function() {
      var dia = this.parentNode.parentNode; /* You need to update this part if you change level of close button */
      dia.style.opacity = 0;
      dia.style.zIndex = -1;
   });
}

var mt = document.querySelectorAll(".modal-toggle");
for (i = 0; i < mt.length; i++) {
   mt[i].addEventListener("click", function() {
      var targetId = this.getAttribute("data-target");
      var target = document.getElementById(targetId);
      target.style.opacity = 1;
      target.style.zIndex = 9999;
   });
}