BootStrap-提示框
阿新 • • 發佈:2018-12-31
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>