模态框中显示一些基本的数据以及触发一些基本的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. Hibernate的继承映射

    对象模型示例: 继承映射的实现方式有以下三种: (一)每棵类继承树一张表 (二)每个类一张表 (三)每个子类一张表 (一)每棵类继承树一张表 关系模型如下: 映射文件如下: <hibernate ...

  2. Application Server not specified

    IDEA使用tomcat启动web项目,配置页面报错Application Server not specified: 那是因为没有配置tomcat,只要配置一下就好了:

  3. Inside JVM 内存模型

    Inside JVM 内存模型 来源  原文:https://blog.csdn.net/silentbalanceyh/article/details/4661230 参考:IBM开发中心文档,&l ...

  4. Sublime text3 插件HTML/CSS/JS prettify 格式化代码

    1.首先安装插件 菜单的preference->packages control,然后输入install .. 回车,再输入HTML/CSS/JS prettify 再回车,重启后就可以了. 2 ...

  5. BZOJ 4671 异或图 | 线性基 容斥 DFS

    题面 Description 定义两个结点数相同的图 G1 与图 G2 的异或为一个新的图 G, 其中如果 (u, v) 在 G1 与 G2 中的出现次数之和为 1, 那么边 (u, v) 在 G 中 ...

  6. cf1063A Oh Those Palindromes (贪心)

    给一些字符 求它们能拼成的字符串 的回文子串的个数最大值 对应的那个字符串 就是把相同的都放一起是最优的,排下序就行了... #include<bits/stdc++.h> #define ...

  7. elasticsearch 安装、配置

    elasticsearch:基于java开发,基于RESTful web 接口,提供分布式多用户能力的全文搜索引擎. elasticsearch 安装: 1. java SE Development ...

  8. 【uoj291】 ZJOI2017—树状数组

    http://uoj.ac/problem/291 (题目链接) 题意 一个写错的树状数组有多大的概率与正常树状数组得出的答案一样. Solution 可以发现这个树状数组维护的是后缀和. 所以二维线 ...

  9. 【CH5105】cookies 贪心+DP

    通过邻项交换法可知,怨气值大的孩子分得的饼干数也应该多(否则交换之后得到的解更优). 观察目标函数的性质,可知目标函数本身是由孩子饼干数的相对大小得到,因此此题中关注的是相对大小. 状态设计:\(dp ...

  10. Eclipse集成Gradle 【Eclipse在线安装Gradle插件方法】

    本章将介绍了Eclipse集成Gradle.以下是将Gradle插件添加到Eclipse的步骤. 步骤1 - 打开Eclipse Marketplace 打开在系统中安装好的Eclipse. 转到 J ...