bootstrap 实现模态框

来源：互联网发布：linux 软阵列编辑：程序博客网时间：2024/06/15 19:53
<%@ 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="弹出模态框" onclick="check()"><%--<input type="button" id="submit2"  value="弹出模态框2" onclick="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"  onchange="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>
阅读全文
0 0