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编码就像这样

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

模态窗口无法打开

1 个答案: