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

文章目录

Bootstrap的模态对话框
- 自定义tag文件如下：
- 加载方法
- 注意事项
- 动态加载的好处

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文件中添加。

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

Bootstrap 模态对话框只加载一次 remote 数据的解决办法
前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹出的时候就会自动从这个地址加载数据到 .modal-body 中,但是它只会加载一次,不过 ...
Bootstrap 模态对话框只加载一次 remote 数据的解决办法转载
http://my.oschina.net/qczhang/blog/190215 摘要前端框架 Bootstrap 的模态对话框,可以使用 remote 选项指定一个 URL,这样对话框在第一次弹 ...
unity加载sprite_Unity 利用UGUI打包图集，动态加载sprite资源
今天做了一个UI界面,这个界面是好友界面,该界面上有若干个好友item. 需要对每个tem的头像对象(image)动态显示对应的头像.尝试利用UGUI的图集来加载,具体实现如下: 1.首先,需要知道S ...
java spring包_java 自定义加载器，加载spring包，动态加载实现，jar包隔离，tomcat加载webapp方式...
java 自定义加载器,加载spring包,动态加载实现,jar包隔离,tomcat加载webapp方式发布时间:2018-08-20 12:02, 浏览次数:774 , 标签: java spri ...
Flutter 动态加载自定义字体
Flutter中使用自定义字体场景1, 加载特定字体,在开发前字体文件就已确定,可以使用参考 flutter开发文档Use a custom font | Flutter,这里就不再描述. 场景2 ...
java 自定义classloader_编写自定义classloader实现类的动态加载
目标:实现类的动态加载原理:使用java的自定义classloader机制实现类的动态加载. 代码实现://自定义classloader public class StrategyClassLoad ...
Ansj动态加载自定义词典
Ansj动态加载自定义词典直奔主题直奔主题之前看的官网,加载userLibrary.dic,使用配置文件的方式,不过试了好多次没成功,后来看到有动态加载的方式,于是尝试使用动态加载字典. tal ...
echart自定义动画_ECharts使用—折线图动态加载
最近需求中用到折线图,单线条,多线交错,之前是散点图,用的是另一个 amcharts.js,这个文档也能找的到,回归早本次重点:ECharts 一.首先引入echarts.common.min.js文 ...
Bootstrap弹出框（Popover）插件动态加载数据
效果鼠标点击输入框弹出提示内容,内容是根据输入的字符动态加载的,效果如图: HTML <input type="text" class="form-control ...