jQueryのライトボックス/モーダルウィンドウ

、私はいくつかの処理を実行するユーザのためにページのポップアップ画面を作成することを考えた。jQueryのライトボックス/モーダルウィンドウ

私は基本的にこれをしたいですページは、トップレベルのサマリー・レコードから押すボタンに基づいて詳細なリボンを表示するドリルダウン・ウィンドウのようになります。

ポップアップの代わりに、私はjQueryライトボックスの機能/モーダルウィンドウを考えていました。

私は、Web画面と写真ではなくポップアップウィンドウを表示するためのライトボックスの良い例と簡単な例が公開されていますが、jQueryのルックアンドフィール、すなわちユーザーとその後、要約レコードにズームアウトします。

ホープ誰かがなど

おかげ例/ URLを支援することができます。トニー。

出典

2009-07-01 tonyf

は、この例を試してみてください、

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Simple JQuery Modal Window from Queness</title> 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 

$(document).ready(function() { 

    //select all the a tag with name equal to modal 
    $('a[name=modal]').click(function(e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     //Get the A tag 
     var id = $(this).attr('href'); 

     //Get the screen height and width 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 

     //Set heigth and width to mask to fill up the whole screen 
     $('#mask').css({'width':maskWidth,'height':maskHeight}); 

     //transition effect  
     $('#mask').fadeIn(1000);  
     $('#mask').fadeTo("slow",0.8); 

     //Get the window height and width 
     var winH = $(window).height(); 
     var winW = $(window).width(); 

     //Set the popup window to center 
     $(id).css('top', winH/2-$(id).height()/2); 
     $(id).css('left', winW/2-$(id).width()/2); 

     //transition effect 
     $(id).fadeIn(2000); 

    }); 

    //if close button is clicked 
    $('.window .close').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     $('#mask').hide(); 
     $('.window').hide(); 
    });    

}); 

</script> 
<style> 
body { 
font-family:verdana; 
font-size:15px; 
} 

a {color:#333; text-decoration:none} 
a:hover {color:#ccc; text-decoration:none} 

#mask { 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:9000; 
    background-color:#000; 
    display:none; 
} 

#boxes .window { 
    position:absolute; 
    left:0; 
    top:0; 
    width:440px; 
    height:200px; 
    display:none; 
    z-index:9999; 
    padding:20px; 
} 

#boxes #dialog { 
    width:375px; 
    height:203px; 
    padding:10px; 
    background-color:#ffffff; 
} 

</style> 
</head> 
<body> 
<h2>Simple jQuery Modal Window</h2> 
<ul> 
<li><a href="#dialog" name="modal">Simple Window Modal</a></li> 
</ul> 

<div id="boxes"> 
<div id="dialog" class="window"> 
Simple Modal Window | 
<a href="#"class="close"/>Close it</a> 
<p>Anything can go Here</p> 
</div> 
<!-- Mask to cover the whole screen --> 
    <div id="mask"></div> 
</div> 

</body> 
</html>

出典

2009-07-01 13:06:02

ありがとうTony。あなたの例に基づいて、URLをソースとして渡すことでこれをiframeモーダルウィンドウとして使用することは可能ですか？また、 'Esc'キーを使用してモーダルウィンドウを閉じることもできますか？ – tonyf

Iframeで試したことはありませんが、なぜ動作しないのかわかりません。 –

またはJqueryを使用して別のファイルのコードをモーダルのdivタグに挿入することができます –

-1

あなたは、その画面をモーダルにする必要があることをあなたはよろしいですか？彼らはアプリの残りの部分を使用する前に、彼らが画面上でやっていることが不可欠ですか？

モーダルウィンドウを適切に導入することによってユーザビリティに損害を与える危険性がない場合。ライトボックス技術を使用するのではなく、領域を広げてみてください。

出典

2009-07-01 13:25:10 edeverett

http://jquery.com/demo/thickbox/

ThickBoxのライトボックススタイルのモーダルのインラインコンテンツを行います。