自定义子窗体
最近在做一个简单web项目,需要在一个页面上弹出一个窗口,展示信息进行交互操作。使用了Bootstrap模态框插件。主要的思路还是 div+css 实现遮罩+弹出框(在页面中间)。
一、简单说明
1、css:z-index的值越大, 被层叠在最上面。
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0 }
2、模态框属性
data-dismiss="modal" : 是自定义的 HTML5 data 属性,被用于关闭模态窗口,如果不需要点击按钮就关闭弹框,就不要加这个属性。
this.$element.on("click.dismiss.bs.modal",'[data-dismiss="modal"]',a.proxy(this.hide,this))
手动打开模态框:modal('show')
手动关闭模态框:modal('hide')
二、例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div> <h2>弹框实例</h2> <button class="btn btn-primary btn-lg" onclick="showConfirmDialog()">按钮</button> </div> <div id="confirmDialog" class="modal fade" role="dialog"> <div class="modal-dialog" role="document" style="width: 700px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="modaltitle">title</h4> </div> <form> <div class="modal-body" style="max-height: 600px; overflow-y: auto"> <label>Content</label> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" onclick="confirmoperate()" data-dismiss="modal" style="width: auto">确认</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> </div> </form> </div> </div> </div> <script> function showConfirmDialog() { var modal = $('#confirmDialog'); $(modal).modal('show'); } </script> </body> </html>
展示结果:
在弹出框中,就可以写自己需要的内容。