bootstrap的模态框

bootstrap的模态框

bootstrap的模态框还是很好用的。 之前做了一个项目,对modal有一点理解,现在记录一下,希望对大家有帮助。

首先让大家看看项目中modal的效果。

删除图书

那个弹出的modal代码如下:

open_del_modal这个js如下:

在 function(data,status)里面,可以判断返回的参数

我这里没有判断,就直接重新加载了页面。

恩,我的行文理念是,你按着我的步骤来,你就一定能把东西做出来,至于里面的技术难点,咱们后面再讨论。

先让车子跑起来,再去考虑它具体怎么实现的。

另外,关于删除图片这效果,我个人认为,还可以使用sweetalert来实现。

​​它的技术,大家自己去探索吧。

那删除图书的技术难度在什么地方?

恩...我想想额,好像没有技术难度呀。

现在说第二个效果

如图3

这里面的核心逻辑,就是动态的设定弹出的模态框的内容。

修改图书按钮的html如下

修改图书

对应的updateModal如下

get_one?isbn=${recoreds.isbn}返回一个jsp,内容就自动加载到updateModal的modal-content 就这么简单。 data-toggle="modal" data-target="。updateModal" 那么a元素里出现的这两个参数是什么意思? 其实我也不懂,看网上的说法,data-toggle就是说把a这个元素变成modal这个元素。data-target就是说对象就是updateModal。 我自己是主要搞后端的,其实,个人感觉像前端这些东西,知道怎么做能达到效果,哪些参数和哪些参数对应。就可以了。 et_one?isbn=${recoreds.isbn}返回的内容如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib prefix="c" uri="html>

最后整个页面的代码

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><%@taglib prefix="c" uri=" String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%>

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。