自定义tag打包Bootstrap模态对话框并动态加载传值

Bootstrap的模态对话框

为了复用bootstrap的模态框，将其封装入自定义tag文件中，在jsp中加载。

自定义tag文件如下：

<%@ tag language="java" pageEncoding="UTF-8"%>
<%@ attribute name="title" required="false" description="模态对话框的标题" %>
<%@ attribute name="msg" required="false" description="模特对话框的消息内容" %>
<div class="modal fade" id="modal-default">
  <div class="modal-dialog">
    <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">${title == null ? "温馨提示" : title}</h4>
      </div>
      <div class="modal-body">
        <p>${msg}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary app-btn-save">确定</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

加载方法

• 在WEB-INF/tags/dialog文件夹下创建modal.tag文件，文件内容如上
• 在jsp文件中引入该tag

<%@ taglib prefix="m" tagdir="/WEB-INF/tags/dialog" %>

• 使用该tag

<m:modal msg="hello world" title="gogogo"/>

• 触发弹出对话框

<a href="#" type="button" class="btn btn-default btn-sm btn-del" data-toggle="modal"
                   data-target="#modal-default"><i class="fa fa-trash"></i>删除</a>

点击该按钮即弹出对话框

注意事项

• tag文件保存的目录必须是WEB-INF/tags/，然后在该目录下可以自定义目录
• 引入tag文件时引入的保存文件的目录，而不是直接引入文件
• 使用tag有两种方式：
  • 静态加载，即在jsp文件中写好引入语句，如上
  • 动态加载，需要用" ` （反引号）"包裹tag，因为tag会像C++中的宏一样在HTML页中展开，代码如下：

	$(function () {
      $(".btn-del").click(function () {
          let msg = "hello world";
          let title = "follow me";
          if ($("#modal-default").length === 0) {
              $(this).append(`<m:modal msg="`+msg+`" title="`+title+`"/>`);
              console.log("hello world");
          }
      })      
  })  

加载出的代码如下：如果用单引号或双引号包裹都会报错

注意： bootstrap的对话框，关闭按钮有一个属性：data-dismiss="modal"，该属性用来在点击关闭按钮时，关闭模态对话框和遮罩层。
如果采用静态加载，那么该属性必须保留，否则点击关闭按钮没有任何效果（无响应）。
但是如果采用动态加载，那么该属性必须删除，否则遮罩层无法关闭，导致页面无法点击（留下一个黑色图层）。

另外，动态加载的对话框，加载出的窗口标题和内容是居中对齐：

静态加载是靠左对齐：

动态加载的好处

因为该对话框是复用做提示对话框，所以标题和内容需要根据实际情况动态输入，如上面的例子。如果需要其他参数，可以在tag文件中添加。