引文件:
<link href="dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="dist/css/bug-workaround.css" rel="stylesheet" /> <script src="dist/js/jquery-1.12.4.js"></script> <script src="dist/js/bootstrap.min.js"></script>
菜单:
<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li><a href="/home/backstage">关于我们</a></li> <li><a href="/home/backstageb">建站案例</a></li> <li><a href="/home/backstagek">知识园地</a></li> <li><a href="/home/backstagen">新闻资讯</a></li> <li><a href="#">在线留言</a></li> </ul> </div> </div> </div>
模态框:
<div style="width:40px;height:20px;background-color:gray;" id="sr"></div> <div class="modal fade" id="gg" 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">×</button> <h4 class="modal-title">发布案列</h4> </div> <div class="modal-body"> <h5>产品名:</h5> <input type="text" name="bname" /> <h5 id="ts_name"></h5> <h5>链接:</h5> <input type="text" name="blink" /> <h5 id="ts_lj"></h5> <h5>图片:</h5> <input type="file" name="image" /> <h5 id="ts_tp"></h5> <input type="submit" id="btn_fabu" class="btn btn-primary" value="发布" /> <!--内容 结束--> </div> <div class="modal-footer"> <button id="Button4" type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div>
一段js,点击发生模态框:
document.getElementById("sr").onclick = function () { $(‘#gg‘).modal({ keyboard: true }); }
时间: 2024-10-11 16:32:37