关于弹出bootstrip的模态框示例

最新推荐文章于 2020-12-23 09:24:52 发布

火神大我_2015

最新推荐文章于 2020-12-23 09:24:52 发布

阅读量804

点赞数 1

分类专栏： web开发

本文链接：https://blog.csdn.net/huoshendawo_mo/article/details/49585375

版权

web开发专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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" οnclick="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"%>

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