bootstrap 实现模态框

最新推荐文章于 2024-04-20 12:04:09 发布

Coding_Boy36

最新推荐文章于 2024-04-20 12:04:09 发布

阅读量599

点赞数

分类专栏： html 文章标签： html5 web html

本文链接：https://blog.csdn.net/xq43701200/article/details/75089347

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=640, target-densitydpi=device-dpi, user-scalable=no"/>
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
<meta HTTP-EQUIV="Expires" CONTENT="-1">
<title>加载模态框</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <%--<link href="css/bootstrap.min.css" rel="stylesheet">--%>

    <meta name="description" content="" />
<meta name="keywords" content="" />

</head>
<body>

<input type="button" id="submit"  value="弹出模态框" οnclick="check()">
<%--<input type="button" id="submit2"  value="弹出模态框2" οnclick="check2()">--%>

<!--模态框开始-->
<!-- 模态框（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>
            <div class="modal-body">
                出库类型是：
                <select id="select"  οnchange="goUrl(this.selectedIndex)">
                    <option value="0">请选择</option>
                    <option value="借用">借用</option>
                    <option value="领用">领用</option>
                    <option value="赠与">赠与</option>
                </select>
            </div>
            <div class="modal-footer">
                <div id="thdiv"  align="left">你选择的出库类型是：<p></p></div>
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>





<script type="text/javascript" src="http://front.01event.com/cdn/js/jquery-1.7.2.min.js"></script>
<script src="${contextPath}/content/js/bootstrap.min.js"></script>
<script src="${contextPath}/content/js/layer.js"></script>

<script type="text/javascript">
    function check() {
        //加载模态框
        $('#myModal').modal();

        $(document).ready(function () {
            $("#select").bind("change",function(){
                if($(this).val()==0){
                    return;
                }
                else{
                    $("p").text($(this).val());
                }
            });
        });
    }



</script>
</body>
</html>