关于弹出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()方法即可。