欢迎使用CSDN-markdown编辑器

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' });
         });
     }

---

显示截图