欢迎使用CSDN-markdown编辑器

来源:互联网 发布:淘宝网推广方法ppt 编辑:程序博客网 时间:2024/05/16 18:15

bootstrap弹出框的快速实现

首先要具备有bootstrap的基础知识

  • html代码块
<divclass="modal fade"id="NoPermissionModal">     <!-- 最外层 -->     <div class="modal-dialog" style="margin-top: 30px; margin-left: 100px;">             <div class="modal-content" style="width: 940px;height:570px;">                 <div class="modal-body" style="width: 940px;height:570px; padding:0;">                           <div class="modal-footer" style="padding: 5px 10px 0px 0px; margin-top: 0; text-align: right;border-top: 0px ; ">                                <div style="float:left; position: relative; left: 50%;">                                <span>hhhhh</span>                                </div>                                 <!-- 关闭弹出框 -->                                <button type="button" class="btn btn-default " data-dismiss="modal">关  闭    </button>                                <!-- 关闭时页面刷新 -->                      <!-- <button class="btn btn-default"  type="button" onclick="window.history.go(0);" >    关  闭    </button> -->                     </div>                     <iframe scrolling="no" id="NoPermissioniframe" width="950px" height="550px" frameborder="0"></iframe>                 </div>             </div>     </div></div>
  • jq代码块
/* 选择预览视频 */     function videoplay(id,videosrc){           $("."+id).click(function(){               /* 指定弹出页面路径 */             var frameSrc = "${pageContext.request.contextPath}/CourseMessagePC/toPlay.do?src="+videosrc;             $("#NoPermissioniframe").attr("src", frameSrc);             $('#NoPermissionModal').modal({ show: true, backdrop: 'static' });         });     }

显示截图

这里写图片描述