关于弹出bootstrip的模态框示例

jsp实现message.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><script src="static/js/odm/pages/expert/common/message.js" type="text/javascript"></script><div class="modal fade" id="messageModal" tabindex="-1" role="dialog" aria-labelledby="messageModalLabel" aria-hidden="true"><div class="modal-dialog" style="margin-top: 300px;"><div class="modal-content" style="width: 300px;margin-left: auto;margin-right: auto;"><div class="modal-body" style="padding: 10px 20px;"><div><div class="form-group" style="margin-bottom:0;"><div id="messageContent" style="width:100%;line-height:40px;font-size: 16px; color:rgba(139,87,42,1);text-align:center;"></div></div></div></div><div class="modal-footer" style="margin-top:0;padding: 10px 20px;"><input type="hidden" id="url"/><div id="messageButton" onclick="ok()" style="height:30px; line-height: 30px;text-align: center;font-size: 18px;background-color: rgba(237,197,64,1);width: 200px;margin: auto;color: rgba(139,87,42,1);border-radius: 5px;-webkit-border-radius: 5px; -moz-border-radius: 5px; cursor: pointer;">确定</div></div></div></div></div>

javascript实现message.js

// 关闭消息弹窗function ok(){if($("#url").val() == ""){$("#messageModal").modal("hide");}else{if($(window.parent.document).contents().find("#mainFrame").length > 0){$(window.parent.document).contents().find("#mainFrame").attr("src", $("#url").val());} else {window.location.href = $("#url").val();}$("#url").val("");}}// 显示消息弹窗function showMessage(messageContent, msgHeight, msgTop){if( typeof messageContent === "undefined"){messageContent = "";}if( typeof msgHeight === "undefined"){msgHeight = "100px";}$("#messageModal > div").css("height", msgHeight);if( typeof msgTop === "undefined"){msgTop = "100px";}$("#messageModal > div").css("margin-top", msgTop);$("#messageContent").html(messageContent);$("#messageModal").modal({backdrop: false,keyboard: false,show: true,remote: false});}

在要调用弹出框的的base.jsp中引入上述相应的jsp和js

<%@ include file="/WEB-INF/pages/expert/common/message.jsp"%>

<script src="static/js/odm/pages/expert/common/message.js" type="text/javascript"></script>

 在base.js中直接调用即可OK(),showMessage()方法即可。