模态框中显示一些基本的数据以及触发一些基本的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. Django前端获取后端数据之前端自定义函数

    在写网站的时候遇到了一个问题: Django在后端向前端传数据时,多数会使用dict字典来传送多个数据,但前端只能遍历,没有一个用key取到value值的方法可以直接使用 如果作为一个list传递到前 ...

  2. Codeforces Round #417 (Div. 2) C. Sagheer and Nubian Market

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  3. Java核心技术-具体的集合

    除了Map结尾的类之外,其他都实现了Collection接口,而以Map结尾的类实现了Map接口. 链表 在Java程序设计语言中,所有链表实际上都是双向链表的(double linked)--即每个 ...

  4. jsp关闭或刷新浏览器（解决浏览器不兼容），请求后台onbeforeunload、onunload

    jsp关闭或刷新浏览器(解决浏览器不兼容),请求后台  onbeforeunload.onunload 1.看代码: function test(e) { var json = "退出,清理 ...

  5. 【POJ1015】Jury compromise 多个费用的背包

    这是一道比较综合的动态规划问题. 首先,根据题目中的从N个人中选出M个人,并且要使得某个目标函数最优,可以想到是背包问题,且因为要取出M个人,人数也应该作为背包体积的一个维度. 其次,要求输出路径,因 ...

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

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

  7. @Value加载classpath下的文件

    maven工程中,要加载classpath下的文件并以InputStream的形式返回,通常使用的方法是 InputStream inputStream = Test.class.getClassLo ...

  8. spoj QTREE - Query on a tree(树链剖分+线段树单点更新，区间查询)

    传送门:Problem QTREE https://www.cnblogs.com/violet-acmer/p/9711441.html 题解: 树链剖分的模板题,看代码比看文字解析理解来的快~~~ ...

  9. 织梦DedeCMS信息发布员发布文章阅读权限不用审核自动开放亲测试通过！

    文章发布员在织梦dedecms后台添加文章时却要超级管理员审核,这无疑是增加了没必要的工作. 登录该账号发布文章你会发现该文章显示的是待审核稿件,且并没有生成静态文件,在前台是看不到这篇文章的,而多数 ...

  10. redis 启动停止脚本

    redis 启动停止脚本,该redis需要密码登录,如没有密码,去掉stop函数里的 -a #!/bin/sh # #chkconfig: 2345 80 90 # Simple Redis init ...