模态框中显示一些基本的数据以及触发一些基本的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. Leading and Trailing LightOJ - 1282 （取数的前三位和后三位）

    题意: 求n的k次方的前三位 和 后三位 ...刚开始用 Java的大数写的...果然超时... 好吧  这题用快速幂取模求后三位  然后用一个技巧求前三位 ...orz... 任何一个数n均可以表示 ...

  2. 【BZOJ4671】异或图（斯特林反演）

    [BZOJ4671]异或图(斯特林反演) 题面 BZOJ Description 定义两个结点数相同的图 G1 与图 G2 的异或为一个新的图 G, 其中如果 (u, v) 在 G1 与 G2 中的出 ...

  3. 架构师成长之路4.4-多维监控体系_zabbix

    点击返回架构师成长之路 点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 架构师成长之路4.4-多维监控体系_zabbix 自学Zabbix之路[第 ...

  4. [hgoi#2019/2/16t4]transform

    题目描述 植物学家Dustar培养出了一棵神奇的树,这棵有根树有n个节点,每个节点上都有一个数字a[i],而且这棵树的根为r节点. 这棵树非常神奇,可以随意转换根的位置,上一秒钟它的根是x节点,下一秒 ...

  5. SharePoint 2013 pre-config

    #region 1. add winrm, application server and web server role Add-WindowsFeature winrm-iis-ext, Appli ...

  6. Java核心技术-映射

    集是一个集合,它可以快速地查找现有的元素.但是,要查看一个元素,需要有要查找元素的精确副本.这不是一种非常通用的查找方式.通常,我们知道某些键的信息,并想要查找与之对应的元素.映射(map)数据结构就 ...

  7. BloodHound官方使用指南

    0x00  概观 1.BloodHound介绍 BloodHound是一种单页的JavaScript的Web应用程序,构建在Linkurious上,用Electron编译,NEO4J数据库是Power ...

  8. 02-css的选择器

    css的选择器:1.基本选择器 2.高级选择器 基本选择器包含: 1.标签选择器 标签选择器可以选中所有的标签元素,比如div,ul,li ,p等等,不管标签藏的多深,都能选中,选中的是所有的,而不是 ...

  9. （递推）一只小蜜蜂... hdu2044

    一只小蜜蜂... 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2044 Time Limit: 2000/1000 MS (Java/Others)    ...

  10. 红外条码扫描器的另类使用C#版

    3年前写了一篇<USB口的红外条形码扫描器的另类使用>,不过相关代码是VB编写,在这几年之间,有许多网友提出需要C#版的,起初还以为由VB修改C#应该很容易,最近研究了一下,发现C#和VB ...