欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

BootStrap-提示框

程序员文章站 2022-05-31 20:27:06
...

1.源码

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/Popper.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<html>
<head>
    <title>添加</title>
    <style>
        table{
            text-align: center;
        }
        thead{
            font-size: large;
            font-weight: bold ;
        }
        body{
            padding-top: 100px;
        }
        .form-control{
            width: 300px;
        }

    </style>
</head>
<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a href="#" class="navbar-brand">Easy Employee Manage</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="/go/home.do">Home</a></li>
                <li><a href="#">Login</a></li>
                <li class="active"><a href="/go/add.do">Add</a></li>
                <li><a href="">About</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <form role="form" class="form-info">
        <div class="form-group col-md-4 col-md-offset-4" >
            <label>名称:</label>
            <input type="text" class="form-control" placeholder="Enter Name">
        </div>
        <div class="form-group col-md-4 col-md-offset-4">
            <label>类型:</label>
            <select class="form-control" style="width: 120px">
                <option>模糊查询</option>
                <c:forEach items="${types}" var="type">
                    <option>${type.name}</option>
                </c:forEach>
            </select>
        </div>
        <div class="form-group col-md-4 col-md-offset-4">
            <label>评分:</label>
            <input type="text" class="form-control" placeholder="Enter Name">
        </div>
        <div class="form-group col-md-4 col-md-offset-4">
            <label>日期:</label>
            <input type="date" class="form-control" placeholder="Enter Name">
        </div>
        <div class="form-group col-md-3 col-md-offset-5">
            <input type="button" value="提交" id="test" class="form-control" style="width: 100px">
        </div>
    </form>

    <div class="modal" id="my-modal-alert">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="modal-title">模态框</h4><span id="num"></span>
                </div>
                <!--/*modal-header*/-->
                <div class="modal-body">
                    <div id="modal_message"><span id="message">modal_message</span></div>
                </div>
                <!--/*modal-body*/-->
                <div class="modal-footer" id="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                    <!--/*modal-body*/-->
                </div>
                <!--/*modal-footer*/-->
            </div>
            <!--/*modal-dialog*/-->
        </div>
        <!--/*modal-content*/-->
    </div>

</div>

<script type="text/javascript">

    $(function() {
        $("#test").click(function(){
            $("#my-modal-alert").modal("toggle");
            $(".modal-backdrop").remove();//删除class值为modal-backdrop的标签,可去除阴影
            //设置提示信息
            $("#message").text("dsadsadsa");
        });
    });
</script>

</body>
</html>

2.效果

BootStrap-提示框

相关标签: bootstrap 提示框