在google中搜索后,最后我决定以下是JQuery中具有跨浏览器支持的优秀弹出插件。
但是我已经尝试了这些插件,但在演示中显示的跨浏览支持似乎没有任何效果。
我的需要:
1.我有两个按钮,比如转接,会议
2.我需要创建一个弹出窗口。内容将是Iframe中的JSP,并在弹出窗口中显示
我在bpopup中尝试过的内容,
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<!-- <script src="colorbox-master/jquery.colorbox.js" type="text/javascript"></script> -->
<script src="bpopup-master/jquery.bpopup.js" type="text/javascript"></script>
<script type="text/javascript">
// DOM Ready
$(function() {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function(e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
//$('#content').bPopup();
$('#content').bPopup({
content:'iframe', //'ajax', 'iframe' or 'image'
contentContainer:'.content',
loadUrl:'Mypage.jsp' //Uses jQuery.load()
});
});
});
function showPopup(){
alert("show popup");
//$.colorbox({href:"thankyou.html"});
//$.colorbox({href:"DatePicker.jsp"});
$('#content').bPopup();
}
//$('#content').colorbox({href:"thankyou.html"});
</script>
</head>
<body>
<div id='content' style="display : none">
</div>
<!-- <input type="button" onclick="showPopup()" value='showpop'/> -->
<input type="button" id="my-button" value='showpop'/>
</body>
</html>
但它不显示UI,如演示中所示。我得到了用户界面,
另外两个也没有帮助。
希望我们的堆栈用户将帮助找到满足我要求的良好解决方案。