引导程序 4 中的模态 - HTML

在 HTML 中，我们可以使用模态来呈现弹出式窗口，常用于提示、确认或表单等交互操作。

如何创建一个简单的模态框？

在 HTML 中创建一个简单的模态框可以通过以下步骤完成：

1. 创建一个按钮或链接来触发模态框的显示。

   <button data-toggle="modal" data-target="#myModal">打开模态框</button>
   

2. 创建模态框的内容。

   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="myModalLabel">模态框标题</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
           模态框内容
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
           <button type="button" class="btn btn-primary">保存更改</button>
         </div>
       </div>
     </div>
   </div>
   

3. 通过 JavaScript 或 jQuery 来控制模态框的显示和隐藏。

   // 显示模态框
   $('#myModal').modal('show');
   
   // 隐藏模态框
   $('#myModal').modal('hide');
   

如何使用表单组件在模态框中获取用户输入？

在模态框中使用表单组件来获取用户输入可以通过以下步骤完成：

1. 创建一个包含表单的模态框。

   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <form>
           <div class="modal-header">
             <h5 class="modal-title" id="myModalLabel">模态框标题</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
           <div class="modal-body">
             <div class="form-group">
               <label for="inputUsername">用户名</label>
               <input type="text" id="inputUsername" class="form-control" placeholder="请输入用户名">
             </div>
             <div class="form-group">
               <label for="inputPassword">密码</label>
               <input type="password" id="inputPassword" class="form-control" placeholder="请输入密码">
             </div>
             <div class="form-group">
               <label for="inputEmail">邮箱</label>
               <input type="email" id="inputEmail" class="form-control" placeholder="请输入邮箱">
             </div>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
             <button type="submit" class="btn btn-primary">保存更改</button>
           </div>
         </form>
       </div>
     </div>
   </div>
   

2. 在 JavaScript 中获取表单数据并处理。

   $('form').submit(function(event) {
     // 阻止表单默认提交行为
     event.preventDefault();
   
     // 获取表单数据
     var username = $('#inputUsername').val();
     var password = $('#inputPassword').val();
     var email = $('#inputEmail').val();
   
     // 处理表单数据
     ...
   });
   

如何响应模态框中的事件？

在模态框中可以通过事件来实现交互。

以下是一些常见的模态框事件：

• show.bs.modal：在模态框显示前触发。
• shown.bs.modal：在模态框显示后触发。
• hide.bs.modal：在模态框隐藏前触发。
• hidden.bs.modal：在模态框隐藏后触发。

在 JavaScript 或 jQuery 中实现模态框事件可以通过以下方法：

$('#myModal').on('shown.bs.modal', function () {
  // do something…
});