私は通常、「window.open」を使用してポップアップ ウィンドウを開いて新しい URL を開きます。ウィンドウを新しい URL で開く方法、現在のウィンドウをシャドウ アウト/グレー アウトする方法、閉じるときにシャドウの背景を削除する方法。
これを行うにはjQueryを使用するのが最善ですか? jquery プラグインを使用せずにデフォルトのライブラリを使用できますか?
このようなことをしてから、アンロード時にシャドウを「無効」にしたいと思います。うまくいけば、コア jQuery ライブラリまたは標準の JavaScript 呼び出しが使用されます。jQuery 以外のプラグインの使用を避けたい。
var popup = window.open('http://google.com', 'popup');
showShadow();
$(window).unload(function() {
if(!popup.closed) {
disableShadow();
}
});
基本的に、ポップアップを開いて、アンロード前にそのウィンドウを設定できます。要するに、このようなもの：
popup = window.open("", "name", "width=400, height=300")
popup.onbeforeunload = function() { $('#shadow').hide();}
私はあなたのためにフィドルを作成しました。
既存のプラグインを使用する代わりに、jQuery を使用して独自のモーダル ボックスを作成しますか? ...OK、プレイしましょう (すでに指摘されているように、ポップアップの使用はユーザーフレンドリーなソリューションではありません):
チェックリスト :
- the trigger
- the shadow layer
- the modal box size and position
- add content to modal and display it along the shadow
1) トリガーは、モーダル内のコンテンツを開くための単純な html リンクです。
<a href="http://jsfiddle.net" class="myModal" data-width="400" data-height="300">open url</a>
... モーダル ビアのサイズdata-widthとdata-height(HTML5) 属性を渡します。
2)shadowレイヤーは、トリガーの後に本文に追加する html 構造です。js 変数に構造を設定できます
var shadow = "<div class='shadow'></div>";
3) 前述したように、モーダルのサイズはdata-*リンク内のいくつかの属性によって設定されます。いくつかの計算を行う必要があります
var modalWidth = $(this).data("width");
var modalHeight = $(this).data("height");
var modalX = (($(window).innerWidth()) - modalWidth) / 2; // left position
var modalY = (($(window).innerHeight()) - modalHeight) / 2; // top position
注:は、後でメソッド内で取得する$(this)トリガー セレクターです。ところで、メソッドにはjQuery v1.7+が必要です.myModal.on("click").on()
4) 次に、モーダルの html 構造を作成し、 content を渡す必要がありますhref。関数を作成します
function modal(url) {
return '<div id="modal"><a id="closeModal" title="close" href="javascript:;"><img src="http://findicons.com/files/icons/2212/carpelinx/64/fileclose.png" alt="close" /></a><iframe src="' + url + '"></iframe></div>';
}
...ご覧のとおり、私たちの構造には、モーダルとシャドウレイヤーを削除するための閉じるボタンが含まれています。この関数は、( ) が呼び出されたときに、タグの属性urlを設定できるパラメーターも取得します。srciframe
注: 外部 URL を開くにはタグを使用する必要がありますが、iframe を使用する場合iframeは常に同じオリジン ポリシーとその他のセキュリティ制限を考慮する必要があります。
ここで、トリガーをクリックした後にすべてのイベントをまとめて.myModal、ボディにシャドウとモーダル ボックスの両方を追加し、閉じるボタンをクリックしたときにそれらを削除する必要があります。
$(".myModal").on("click", function(e) {
e.preventDefault();
// get size and position
modalWidth = $(this).data("width");
modalHeight = $(this).data("height");
modalX = (($(window).innerWidth()) - modalWidth) / 2;
modalY = (($(window).innerHeight()) - modalHeight) / 2;
// append shadow layer
$(shadow).prependTo("body").css({
"opacity": 0.7
});
// append modal (call modal() and pass url)
$(modal(this.href)).appendTo("body").css({
"top": modalY,
"left": modalX,
"width": modalWidth,
"height": modalHeight
});
// close and remove
$("#closeModal").on("click", function() {
$("#modal, .shadow").remove();
});
}); // on
STYLE : もちろん、モーダル要素を適切に機能させるには、いくつかの基本的な CSS スタイルが必要です。
.shadow {width: 100%; height: 100%; position: fixed; background-color: #444; top: 0; left:0; z-index: 400}
#modal {z-index: 500; position: absolute; background: #fff; top: 50px;}
#modal iframe {width: 100%; height: 100%}
#closeModal {position: absolute; top: -15px; right: -15px; font-size: 0.8em; }
#closeModal img {width: 30px; height: 30px;}
*デモを見る*
ボーナス：キーkeyupを使用してイベントをバインドしてモーダルを閉じることもできますescape
$(document).keyup(function(event) {
if (event.keyCode === 27) {
$("#modal, .shadow").remove();
}
}); //keyup
最後の注意: コードは多くの改善と最適化の対象となりますが、多くのライトボックスが行うことの基本的なレイアウトです。私の最後の推奨事項:より高度な機能にはfancyboxを使用してください。
Javascript を使用して新しいポップアップ ウィンドウを作成するのは 1990 年代の話です。あなたが探しているのは、UI に関しても見た目に関してもモーダル ダイアログです。モーダル ダイアログの作成方法については、何十億もの例と事前にパッケージ化された jquery スニペットがあり、jQuery UI、YUI、Bootstrap などのほとんどのクライアント側 UI フレームワークには、モーダル ダイアログ機能が組み込まれています。それらに飛び込むことをお勧めします。
次のように、呼び出しによって返されたインスタンスのbeforeUnloadイベントを使用する必要があります。windowwindow.open()
popup = window.open('relative_url', 'popup');
$(popup).bind('beforeunload', function() {
disableShadow();
});
オープナー ウィンドウがポップアップと対話するには、URL が同じドメイン上にある必要があることに注意してください。
ここでフィドルを参照してください：http://jsfiddle.net/hongaar/QCABh/
jQuery UI を使ってみませんか? 私はあなたが別のライブラリを望んでいないことを知っていますが、それがなくても生きていけるので、別のライブラリではなくjQueryの拡張です。多数のウィジェットがあり、それらのすべてを変更、構成できます。さまざまなテーマで表示できることが最善であり、テーマ ローラーを使用してすばやく簡単に作成でき、モジュール化することもできます。現在のプロジェクトで必要なものを取得してください。これをチェックしてください：
http://jqueryui.com/dialog/#modal-form
使い方は本当に簡単です。これにより、別の URL へのフレームを持つモーダル ダイアログを開くことができます。クローズイベントでは、やりたいことが何でもできます。
基本的に、新しいウィンドウにイベント リスナーをアタッチして、Web ページで disableShadow() 関数を実行する必要があります。
これをコードに追加すると、うまくいくはずです。
popup.unload(function() { disableShadow() });
fancybox http://fancybox.net/などの jquery プラグインを試す
新しいウィンドウを開くことができ、それを閉じると、オープナー ウィンドウで機能を実行できます。
新しいウィンドウに直接スクリプトを記述して簡単な例を示しますが、ポップアップにリンクが提供されている場合は、新しいウィンドウに使用される HTML にスクリプトを含めることもできます。
$("#popupBtn").on('click', openPopup); //using a button to open popup
function openPopup() {
$('#cover').fadeIn(400);
var left = ($(window).width()/2)-(200/2),
top = ($(window).height()/2)-(150/2),
pop = window.open ("", "popup", "width=400, height=300, top="+top+", left="+left),
html = '<!DOCTYPE html>';
html += '<head>';
html += '<title>My Popup</title>';
html += '<scr'+'ipt type="text/javascript">';
html += 'window.onbeforeunload = function() { window.opener.fadeoutBG(); }';
html += '</sc'+'ript>';
html += '</head>';
html += '<body bgcolor=black>';
html += '<center><b><h2 style="color: #fff;">Welcome to my most excellent popup!</h2></b></center><br><br>';
html += '<center><b><h2 style="color: #fff;">Now close me!</h2></b></center>';
html += '</body></html>';
pop.document.write(html);
}
window.fadeoutBG = function() { //function to call from popup
$('#cover').fadeOut(400);
}
フェードインされた固定カバーを使用すると、ページ上の要素のクリックも防止されます。また、クリックするとpop.close()モーダルが閉じるように、カバーがクリックされた場合にポップアップを閉じるクリック ハンドラーをカバーにアタッチすることもできます。その外。
ポップアップから親ページの関数を呼び出す利点の 1 つは、ポップアップから親に値を渡すことができ、他の方法ではできなかった多くのことを実行できることです。
必要なのは、標準の JavaScript 関数showModalDialog だけです。次に、コードは次のようになります
var url = 'http://google.com';
showShadow();
var optionalReturnValue = showModalDialog(url);
//Following code will be executed AFTER you return (close) popup window/dialog
hideShadow();
更新 hongaar が述べたように、Opera は showModalDialog が好きではありません。また、ポップアップが閉じられたときも、アンロード時 (前) に起動しません。回避するには、ウィンドウがまだ存在するかどうかを定期的にチェックするタイマー (window.setTimeout) が必要です。詳細はこちら
カラーボックスを試す
シンプルで使いやすい
http://www.jacklmoore.com/colorbox
簡単な例:
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://www.jacklmoore.com/colorbox/colorbox/jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
});
</script>
<a class='iframe' href="http://google.com">Outside Webpage (Iframe)</a>
私もこれをやったことがあります。
まず、一部の URL は (iframe) モーダル ウィンドウでは機能しません。私はこれを試していないので、ブラウザーがサポートするネイティブ モーダル ウィンドウで動作するかどうかはわかりません。Google または Facebook を iframe にロードし、何が起こるかを確認します。
第二に、window onunload イベントのようなものは、常に発生するとは限りません (すでに何人かの人々を見てきたように)。
受け入れられた回答バージョンも、静的ページでのみ機能します。リロードすると (ページ上で F5 キーを押しても)、影が非表示になります。 受け入れられた回答についてコメントすることはできないため、少なくともこれらの結果を見ている他の人にこれを知ってもらいたいと思いました。
私はこれまで、この問題を解決するためにあまり技術的ではないアプローチをとってきました: ポーリングです。
<html>
<head>
<script type="text/javascript">
function openWindow(url)
{
var wnd = window.open(url);
var timer = null;
var poll = function()
{
if(wnd.closed) { alert('not opened'); clearInterval(timer); }
};
timer = setInterval(poll, 1000);
}
</script>
</head>
<body>
<a href="#" onclick="openWindow('http://www.google.com'); return false;">click me</a>
</body>
</html>
例については、上記のリンクを参照してください。IE、FF、および Chrome でテストしました。私のタイマーは 1 秒ごとですが、ブラウザーの負荷が非常に低いため、もっと瞬時に感じさせたい場合は、これを 100 ミリ秒程度に簡単に下げることができます。
この例で行う必要があるのは、window.open を呼び出した後、「影を表示」関数を呼び出し、閉じたときに警告する代わりに「影を隠す」関数を呼び出すことだけです。 .
これを試すこともできます... http://fancyapps.com/fancybox/
例はこちら
http://thickbox.net/ をモーダル タイプで試してください。例: http://thickbox.net/#examples