首页 > 代码库 > Bootstrap模态框的使用2

Bootstrap模态框的使用2

2024-11-06 17:36:02   203人阅读

模态框中显示一些基本的数据以及触发一些基本的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="http://www.mamicode.com/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


联系
我们