私はjqueryとそのすべてに非常に慣れていません。アドホックなページを 1 つだけ実行しているため、道に迷いました。iframe をポップアップとして表示する必要があります。どうやってするの？
私はbpopupを試しました：
index.html は次のようになります。
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close">x<a/>
Content of popup
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/jquery.bpopup.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/scripting.min.js"></script>
そしてbpopupのホームページによると、jquery.bpopup.min.jsを修正しました
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;(function($) {
// 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
$('element_to_pop_up').bPopup({
content:'iframe', //'ajax', 'iframe' or 'image'
contentContainer:'.content',
loadUrl:'http://dinbror.dk/search' //Uses jQuery.load()
});
});
});
})(jQuery);
そして、次のようなデフォルトのCSS設定を使用しました：
#element_to_pop_up {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
.b-close{
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
今奇妙なこと。実際に機能するようなデフォルトのjs設定があり $('#element_to_pop_up').bPopup();、ボタンをクリックすると簡単なポップアップが表示されます。しかし、(上記のように) Iframe 設定を使用すると、何も起こりません。何もない。なんで？私はそれととても混乱しています。
ターゲットは、ページの読み込み時にポップアップを表示することです。いくつかのヒントを見てきましたが、どれもうまくいきません。どのファイルをどのように変更するのか????
対処法をご存知でしたら教えてください。私は歩くことを学ぶ小さな子供のようなものであることを忘れないでください. だから、「靴ひもを結ぶ」などの細部をスキップしないでください. どうもありがとうございました。