模态窗口打不开

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 编码是这样的

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

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