0

google中搜索后,最后我决定以下是JQuery中具有跨浏览器支持的优秀弹出插件。

  1. 弹出 窗口
  2. 彩盒 彩盒
  3. 灯箱_我灯箱 _我

但是我已经尝试了这些插件,但在演示中显示的跨浏览支持似乎没有任何效果。

我的需要:

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,如演示中所示。我得到了用户界面,

在此处输入图像描述

另外两个也没有帮助。

希望我们的堆栈用户将帮助找到满足我要求的良好解决方案。

4

1 回答 1

1

您应该使用http://jqueryui.com/dialog/ 它是最常见的弹出窗口,您可以自己编写代码来解决问题 :)

编辑您可以将任何内容加载到您的 iframe 中

<div id="dialog" title="iframe">
    <iframe src=""/>
</div>

$("#dialog").dialog({
        autoOpen: false,
    modal: true,
    height: 440,
    width: 388,
    dialogClass: 'overlay',
    show: "fade",
});

 $("#dialog").dialog("open");
于 2013-09-30T13:57:15.920 回答