モーダルウィンドウが開きません

Question

私のウェブページにモーダルウィンドウオプションを追加しようとしています。これは検索ページで、各検索結果をクリックするとリンクがモーダルウィンドウで開きます。だから私は、ページのコードをhttp://www.queness.com/post/77/simple-jquery-modal-window-tutorialから使いました。jqueryテンプレートのセクションを除いてページのどこにでもモーダルウィンドウがあります。私たちが代わりにモーダルウィンドウで開くのは、タイトルのリンクをクリックしたとき、私のテンプレートのコーディングはこの

<script id="srch1" type="text/x-jquery-tmpl"> 
     <tr><td><div id="title"><a href="#dialog" name="modal" style="text-decoration:none; color:#333333;"><b>${_source.Title}</b></a></div></td></tr> 
     <tr><td><div id="date">${_source.fetchTimeStamp}&nbsp;|&nbsp; ${_source.SourceName}</div></td></tr> 
     <tr><td><div id="content">${_source.Content}</div></td></tr> 
</script> 

ように書きますので、ページ移動がトップにバックアップし、「#dialogは」webapgeアドレスの横に表示されます。これは修正されていますか？

のJavascript/jQueryのコードは、この

$（ドキュメント）.ready（関数（）{

//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(); 
});  

//if mask is clicked 
$('#mask').click(function() { 
    $(this).hide(); 
    $('.window').hide(); 
});   

$(window).resize(function() { 

    var box = $('#boxes .window'); 

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

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

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

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

}); 

}）のように進みます。

とプレーンHTML部分

<div id="boxes"> 
<div id="dialog" class="window"> 
Simple Modal Window | 
<a href="#" class="close"/>Close it</a> 
</div> 
<div id="mask"></div> 
</div> 

Answer 1

あなたのコードは罰金だ、私はJsFiddleにそれを貼り付けて、それが必要のようにそのは行動：http://jsfiddle.net/3Dqen/

は、あなたが任意のJSのエラーが出るかどうかを確認しようとすることができ？

---

domがロードされた後にリンクが挿入される可能性があるため、リストされていない可能性があります。 LIVE機能を試してみてください。

$('a[name=modal]').live("click", function(){ 
    //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); 
});