0

googleで検索した結果、クロス ブラウザーをサポートするJQuery の優れたポップアップ プラグインは以下のとおりであることが最終的にわかりました。

  1. bpopup bpopup
  2. カラーボックス カラー ボックス
  3. Lightbox_me Lightbox_me

しかし、私はそれらのプラグインを試してみましたが、クロス ブラウズ サポートのデモに示されているように何も動作しないようです。

私の必要性:

1.転送、会議などの2つのボタンがあります

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は表示されません。UIを次のように取得しました。

ここに画像の説明を入力

他の 2 つも役に立ちませんでした。

私たちのスタック ユーザーが、私の要件に対する適切な解決策を見つけるのに役立つことを願っています。

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 に答える