模式窗口將不會打開

Question

我正在嘗試爲我的網頁添加模式窗口選項。這是一個搜索頁面，當點擊每個搜索結果時，鏈接將在模式窗口中打開。因此，我使用了頁面http://www.queness.com/post/77/simple-jquery-modal-window-tutorial中的代碼，除了jquery模板部分外，頁面中的模式窗口wrks無處不在。我的模板編碼是這樣的

<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的編碼是這樣的

$（文件）。就緒（函數（）{

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