ページの読み込み時に Fancybox (モーダルまたはライト ボックスのFancybox のバージョンなど)を起動したいと考えています。それを非表示のアンカー タグにバインドし、JavaScript を介してそのアンカー タグのクリック イベントを起動することもできますが、Fancybox を直接起動して余分なアンカー タグを回避することをお勧めします。
324951 次
18 に答える
165
Fancybox は現在、自動的に起動する方法を直接サポートしていません。私が作業することができた回避策は、非表示のアンカー タグを作成し、そのクリック イベントをトリガーすることです。jQuery および Fancybox JS ファイルがインクルードされた後に、クリック イベントをトリガーする呼び出しがインクルードされていることを確認してください。私が使用したコードは次のとおりです。
このサンプル スクリプトは HTML に直接埋め込まれていますが、JS ファイルに含めることもできます。
<script type="text/javascript">
$(document).ready(function() {
$("#hidden_link").fancybox().trigger('click');
});
</script>
于 2009-05-04T17:37:30.933 に答える
68
ドキュメントの準備ができてこの関数を呼び出すことで、これを機能させました。
$(document).ready(function () {
$.fancybox({
'width': '40%',
'height': '40%',
'autoScale': true,
'transitionIn': 'fade',
'transitionOut': 'fade',
'type': 'iframe',
'href': 'http://www.example.com'
});
});
于 2010-09-06T03:14:46.303 に答える
12
それは簡単です：
次のように、最初に要素を非表示にします。
<div id="hidden" style="display:none;">
Hi this is hidden
</div>
次に、JavaScript を呼び出します。
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#hidden");
});
</script>
以下の画像をご覧ください。
もう一つの例：
<div id="example2" style="display:none;">
<img src="http://theinstitute.ieee.org/img/07tiProductsandServicesiStockphoto-1311258460873.jpg" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$.fancybox("#example2");
});
</script>
于 2014-03-29T07:18:30.350 に答える
10
Window.load (document.ready() とは対照的に) は、Fancybox 2.0 の JSFiddler onload デモで使用されているトリックのようです。
$(window).load(function()
{
$.fancybox("test");
});
他の場所で document.ready() を使用している可能性があり、IE9 は 2 つのロード順序に混乱することに注意してください。これにより、2 つのオプションが残ります。すべてを window.load に変更するか、setTimer() を使用します。
于 2012-08-22T19:48:57.193 に答える
8
または、fancybox のセットアップ後に JS ファイルでこれを使用します。
$('#link_id').trigger('click');
Fancybox 1.2.1 はデフォルトのオプションを使用するだろうと私は信じています。
于 2009-05-27T21:03:28.473 に答える
5
なぜこれがまだ答えの1つではないのですか?:
$("#manual2").click(function() {
$.fancybox([
'http://farm5.static.flickr.com/4044/4286199901_33844563eb.jpg',
'http://farm3.static.flickr.com/2687/4220681515_cc4f42d6b9.jpg',
{
'href' : 'http://farm5.static.flickr.com/4005/4213562882_851e92f326.jpg',
'title' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
}
], {
'padding' : 0,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'image',
'changeFade' : 0
});
});
リンクをトリガーするだけです!!
于 2011-02-28T14:59:45.707 に答える
5
私が見つけた最良の方法は次のとおりです。
<script type="text/javascript">
$(document).ready(function() {
$.fancybox(
$("#WRAPPER_FOR_hidden_div_with_content_to_show").html(), //fancybox works perfect with hidden divs
{
//fancybox options
}
);
});
</script>
于 2011-03-30T12:55:14.970 に答える
4
私の場合、以下は正常に機能します。ページが読み込まれると、ライトボックスがすぐにポップアップします。
JQuery: 1.4.2
ファンシーボックス: 1.3.1
<body onload="$('#aLink').trigger('click');">
<a id="aLink" href="http://www.google.com" >Link</a></body>
<script type="text/javascript">
$(document).ready(function() {
$("#aLink").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
});
</script>
于 2010-09-16T16:17:44.503 に答える
4
アレックスの答えは素晴らしいです。しかし、それがデフォルトの fancybox スタイルを呼び出すことに注意することが重要です。独自のカスタム ルールがある場合は、その特定のアンカーで .trigger クリックを呼び出すだけです。
$(document).ready(function() {
$("#hidden_link").fancybox({
'padding': 0,
'cyclic': true,
'width': 625,
'height': 350,
'padding': 0,
'margin': 0,
'speedIn': 300,
'speedOut': 300,
'transitionIn': 'elastic',
'transitionOut': 'elastic',
'easingIn': 'swing',
'easingOut': 'swing',
'titleShow' : false
});
$("#hidden_link").trigger('click');
});
于 2010-11-11T20:16:32.023 に答える
1
ネイティブ JavaScript 関数setTimeout()を使用して、DOM の準備ができた後にボックスの表示を遅らせることもできます。
<a id="reference-first" href="#reference-first-message">Test the Popup</a>
<div style="display: none;">
<div id="reference-first-message" style="width:400px;height:100px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#reference-first").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'overlayColor' : '#333',
'overlayOpacity' : 0.9
}).trigger("click");
//launch on load after 5 second delay
window.setTimeout('$("#reference-first")', 5000);
});
</script>
于 2011-08-09T15:56:34.157 に答える
1
$(document).ready(function() {
$.fancybox(
'<p>Yes. It works <p>',
{
'autoDimensions' : false,
'width' : 400,
'height' : 200,
'transitionIn' : 'none',
'transitionOut' : 'none'
}
);
});
これは役立ちます..
于 2016-10-07T05:45:37.160 に答える
1
多分これは役立つでしょう...これはフルサイズのjQueryカレンダークリックイベント（http://arshaw.com/fullcalendar/）で使用されました...しかし、jQueryによって起動されるfancyboxを処理するために、より一般的に使用できます。
eventClick: function(calEvent, jsEvent, view) {
jQuery("body").after('<a id="link_'+calEvent.url+'" style="display: hidden;" href="http://thisweekinblackness.com/wp-content/uploads/2009/01/steve-urkel.jpg">Steve</a>');
jQuery('#link_'+calEvent.url).fancybox();
jQuery('#link_'+calEvent.url).click();
jQuery('#link_'+calEvent.url).remove();
return false;
}
于 2009-11-28T18:51:15.307 に答える
-1
jqmodalを使用できるかもしれません。軽量で使いやすいです。呼び出してモーダルボックスを表示できます
$('.box').jqmShow()
于 2009-04-30T14:52:26.387 に答える