模态框中显示一些基本的数据以及触发一些基本的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. BZOJ4569 SCOI2016萌萌哒（倍增+并查集）

    一个显然的暴力是用并查集记录哪些位之间是相等的.但是这样需要连nm条边,而实际上至多只有n条边是有用的,冗余过多. 于是考虑优化.使用类似st表的东西,f[i][j]表示i~i+2^j-1与f[i][ ...

  2. JavaScript实现两小时倒计时

    [构思] 因为只需要的是两小时,所以时间直接写死,然后通过setInterval每1000ms对时间进行减1操作 前期未考虑到当时分秒小于10的状态,所以后面又加上了一个checkTime()来进行限 ...

  3. MT【25】切线不等式原理及例题

    评:切线不等式和琴生(Jesen)不等式都是有其几何意义的,在对称式中每一项单变量后利用图像的凹凸性得到一个线性的关系式.已知的条件往往就是线性条件,从而可以得到最值.

  4. 自学Linux Shell18.1-sed编辑器基础特性

    点击返回 自学Linux命令行与Shell脚本之路 18.1-sed编辑器基础特性 linux世界中最广泛使用的两个命令行编辑器: sed gawk 1. sed概念 sed是stream edito ...

  5. 【BZOJ1880】[Sdoi2009]Elaxia的路线（最短路）

    [BZOJ1880][Sdoi2009]Elaxia的路线(最短路) 题面 BZOJ 洛谷 题解 假装我们知道了任意两点间的最短路,那么我们怎么求解答案呢? 不难发现公共路径一定是一段连续的路径(如果 ...

  6. 最长上升子序列LIS（51nod1134）

    1134 最长递增子序列 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题 收藏 关注 给出长度为N的数组,找出这个数组的最长递增子序列.(递增子序列是指,子序列的元素是递 ...

  7. C# 随机四位数验证码

    string str ="abcdefghigklmnopqrstuvwxyzABCDEFJHIGKLMNOPQRSTUVWXYZ1234567890"; while(true){ ...

  8. codeblocks 输入、输出文件的位置

    codeblocks已经自动地规定了文件位置 另外:有些数据(数据量大)直接复制到exe中执行,会神奇地发生错误,估计是限制了一次粘贴到控制台的数据量.

  9. Apache Shiro 用户信息保存在session方案

    描述 在使用shiro的时候,经常会有一种需求: 把登录成功后的用户对象存放到session中,方面其他地方调用.存放到session这个步骤到底应该在哪里去做,有几个地方比较合适: 调用 Subje ...

  10. mac subLime3 JSON 格式化插件安装

    1.首先找到路径:/Users/hou***in/Library/Application' 'Support/Sublime' 'Text' '3/Packages/ 2.git clone http ...