模态框中显示一些基本的数据以及触发一些基本的JS函数

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>专家</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <script src="js/jquery-1.11.3.min.js"></script>

    <script src="js/bootstrap.js"></script>

    <!-- <script type="text/javascript" src="js/jedate.js">    </script>     -->

</head>

<body>

    <div style="margin:0px auto;text-align: center;">

        <table border="1px" cellspacing="0px" align="center" cellpadding="0px">

            <tr>

                <th>id</th>

                <th>姓名:</th>

                <th>性别</th>

                <th>密码</th>

                <th>签名密码</th>

                <th>出生日期</th>

                <th>领域</th>

                <th>职务</th>

                <th>职称</th>

                <th>电话</th>

                <th>邮箱</th>

                <th>签名</th>

                <th>修改</th>

                <th>删除</th>

            </tr>

        <c:forEach items="${allSpe }" var="specialist">

            <tr>

                <th>${specialist.specialistid}</th>

                <th>${specialist.name}</th>

                <th>${specialist.sex }</th>

                <th>${specialist.password}</th>

                <th>${specialist.signaturepass}</th>

                <th>${specialist.birthday}</th>

                <th>${specialist.engagedomain}</th>

                <th>${specialist.duty}</th>

                <th>${specialist.title}</th>

                <th>${specialist.telephone}</th>

                <th>${specialist.email}</th>

                <th><img alt="" src="${pageContext.request.contextPath }/img/signature/${specialist.signature}" style="width:100px;height:40px"></th>

                <th>

                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#xgzj" onclick="ww('${specialist.specialistid}')">修改</button>

                </th>

                <th><a href="javascript:void(0)" onclick="queren('${specialist.specialistid}')">删除</a></th>

            </tr>

        </c:forEach>

        </table>

    </div>

    <%-- href="${pageContext.request.contextPath }/specialistAction_deleteSpecialist.action?deleteId=${specialist.specialistid}" --%>

    <script type="text/javascript">

function queren(value){

    var xx=self.confirm("确认删除");

    if(xx==1){

        window.location="${pageContext.request.contextPath }/specialistAction_deleteSpecialist.action?deleteId="+value;

        alert("删除成功！");

    }

}

function ww(value){

    document.getElementById("xgid").value=value;

}

    </script>

    <!-- 模态框（Modal） -->

<div class="modal fade" id="xgzj" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">

                    &times;

                </button>

                <h4 class="modal-title" id="myModalLabel">

                    修改专家

                </h4>

            </div>

            <form action="${pageContext.request.contextPath }/specialistAction_updateSpecialist.action" method="post">

                <div class="modal-body" >

                    id:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="xg.specialistId" id="xgid" readonly="readonly" value="" /><br />

                    <br/>

                    name:<input type="text" name="xg.name" />

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭

                    </button>

                    <button type="submit" class="btn btn-primary" onclick="xg()">

                        确认

                    </button>

                </div>

            </form>

        </div><!-- /.modal-content -->

    </div><!-- /.modal -->

</div>

<!-- 按钮触发模态框 -->

<button style="margin-left: 200px;margin-top: 100px" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">

    增加专家

</button>

<!-- 模态框（Modal） -->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">

                    &times;

                </button>

                <h4 class="modal-title" id="myModalLabel">

                    增加专家

                </h4>

            </div>

            <form action="${pageContext.request.contextPath }/specialistAction_addSpecialist.action" method="post">

                <div class="modal-body" >

                    id:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="sl.specialistid" id="" value="" /><br /><br/>

                    name:<input type="text" name="sl.name" /><br/><br/>

                    sex:<input type="text" name="sl.sex" id="" value="" /><br /><br/>

                    birthday:<input type="text" name="sl.birthday"><br/><br/>

                    engageDomain:<input type="text" name="sl.engagedomain" id="" value="" /><br /><br/>

                    duty:<input type="text" name="sl.duty" /><br/><br/>

                    title:<input type="text" name="sl.title" id="" value="" /><br /><br/>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭

                    </button>

                    <button type="submit" class="btn btn-primary">

                        提交

                    </button>

                </div>

            </form>

        </div><!-- /.modal-content -->

    </div><!-- /.modal -->

</div>

</body>

</html>

带事件的Bootstrap模态框的使用2的更多相关文章

  1. 7-20 jquery遍历节点，bootstrap模态框绑定事件和解绑，mock.js，model.urlroot,id,打基础

    7-19 1:$(event.target).parents().filter("tr").find("host-name") 为什么选择不到别的host-na ...

  2. 解决display none到display block 渲染时间过长的问题，以及bootstrap模态框导致其他框中input不能获得焦点问题的解决

    在做定制页面的时候,遇到这么一个问题,因为弹出框用的是bootstrap的自带的弹出框,控制显示和隐藏也是用自带的属性控制 控制显示,在触发的地方 例如botton上面加上 data-toggle=& ...

  3. Bootstrap模态框按钮

    1.触发模态框弹窗的代码 这里复制了一段Bootstrap模态框的代码 <h2>创建模态框(Modal)</h2> <!-- 按钮触发模态框 --> <but ...

  4. Bootstrap 模态框（Modal）插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  5. Bootstrap 模态框在用户点击背景空白处时会自动关闭

    问题: Bootstrap 模态框在用户点击背景空白处时,会自动关闭. 解决方法: 在HTML页面中编写模态框时,在div初始化时添加属性 aria-hidden=”true” data-backdr ...

  6. Bootstrap模态框（MVC）

    BZ这篇博客主要是为大家介绍一下MVC如何弹出模态框.本文如果有什么不对的地方,希望大神们多多指教,也希望和我一样的小菜多多学习.BZ在这里谢过各位. 首先要在页面加上一个点击事件: @Html.Ac ...

  7. 去除bootstrap模态框半透明阴影

    当使用bootstrap模态框默认自带半透明阴影,如果想要去除阴影,需要怎么做呢? 今天在项目中我遇到了这个问题,想要去除模态框的阴影,试了好久都没解决.后来问同事的时候才知道,当模态框弹出后,会加上 ...

  8. 基于bootstrap模态框的日期选择器

    近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...

  9. 第二百四十三节，Bootstrap模态框插件

    Bootstrap模态框插件 学习要点: 1.基本使用 2.用法说明 本节课我们主要学习一下 Bootstrap 中的模态框插件,这是一款交互式网站非常常见的 弹窗功能插件. 一．基本使用 使用模态框 ...

随机推荐

  1. TCP的三次握手与四次挥手过程，各个状态名称与含义

    三次握手 第一次握手:主机A发送位码为syn＝1,随机产生seq number=10001的数据包到服务器,主机B由SYN=1知道,A要求建立联机,此时状态为SYN_SENT: 第二次握手:主机B收到 ...

  2. Java11实战：模块化的 Netty RPC 服务项目

    Java11实战:模块化的 Netty RPC 服务项目 作者:枫叶lhz链接:https://www.jianshu.com/p/19b81178d8c1來源:简书简书著作权归作者所有,任何形式的转 ...

  3. [luogu2144][bzoj1002][FJOI2007]轮状病毒【高精度+斐波那契数列+基尔霍夫矩阵】

    题目描述 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下图所示 N轮状病 ...

  4. 【hdu5306】 Gorgeous Sequence

    http://acm.hdu.edu.cn/showproblem.php?pid=5306 (题目链接) 题意 区间取$min$操作,区间求和操作,区间求最值操作. Solution 乱搞一通竟然A ...

  5. ASP.NET服务器端控件原理分析

    服务器端控件触发事件分两种: 1.服务器端控件Button被渲染成客户端的 <input type="submit" name="Button1" val ...

  6. 几个简单常用的Sql语句

    '; --查Cids为2的Gnumber列的和,列名为Ids select Cids,Plevel from People; select * from Salary; select * from S ...

  7. java web 使用maven打包绕过单元测试

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-suref ...

  8. 蛋白质结构模型和功能预测：I-TASSER工具的使用

    I-TASSER是一款用于预测蛋白质结构和功能的工具,网站链接:https://zhanglab.ccmb.med.umich.edu/I-TASSER/ 具体描述如下: I-TASSER (Iter ...

  9. vuejs怎么在服务器部署？（知乎）

    作者:知乎用户链接:https://www.zhihu.com/question/46630687/answer/157166318来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  10. 洛谷【P2458】[SDOI2006]保安站岗 题解 树上DP

    题目描述 五一来临,某地下超市为了便于疏通和指挥密集的人员和车辆,以免造成超市内的混乱和拥挤,准备临时从外单位调用部分保安来维持交通秩序. 已知整个地下超市的所有通道呈一棵树的形状:某些通道之间可以互 ...