How to set up modal box in bootstrap4-Bootstrap Tutorial-php.cn

How to set up modal box in bootstrap4

(*-*)浩

Release： 2019-07-25 15:09:15

Original

2757 people have browsed it

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.

How to set up modal box in bootstrap4

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

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>模态框实例</h2>
  <!-- 按钮：用于打开模态框 -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
  </button>
   
  <!-- 模态框 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">模态框头部</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
   
        <!-- 模态框主体 -->
        <div class="modal-body">
          模态框内容..
        </div>
   
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        </div>
   
      </div>
    </div>
  </div>
  
</div>

</body>
</html>

Copy after login

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!