Модальное окно не открывается

Question

Я пытаюсь добавить вариант модального окна на свою веб-страницу. Это страница поиска, и при нажатии на каждый результат поиска ссылка откроется в модальном окне. Таким образом, Ive использовал код со страницы 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. Hw cn это фиксировано?

Кодирование 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); 
});