How to set up modal box in bootstrap4

Modal box is a subform covering the parent form. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent form. Subforms can provide information interaction, etc.

#For example, open a modal by clicking a button. (Recommended learning: Bootstrap video tutorial)

nbsp;html>


  <title>Bootstrap 实例</title>
  <meta>
  <meta>
  <link>
  <script></script>
  <script></script>
  <script></script>



<div>
  <h2 id="模态框实例">模态框实例</h2>
  <!-- 按钮：用于打开模态框 -->
  <button>
    打开模态框
  </button>
   
  <!-- 模态框 -->
  <div>
    <div>
      <div>
   
        <!-- 模态框头部 -->
        <div>
          <h4 id="模态框头部">模态框头部</h4>
          <button>×</button>
        </div>
   
        <!-- 模态框主体 -->
        <div>
          模态框内容..
        </div>
   
        <!-- 模态框底部 -->
        <div>
          <button>关闭</button>
        </div>
   
      </div>
    </div>
  </div>
  
</div>

We can create a small modal box by adding the .modal-sm class, and the .modal-lg class can Create a large modal.

The size class is placed after the .modal-dialog class of the

element:

For more Bootstrap related technical articles, please visit Bootstrap Tutorial column to learn!

The above is the detailed content of How to set up modal box in bootstrap4. For more information, please follow other related articles on the PHP Chinese website!