Question

I am trying to add a modal window option to my webpage. It is a search page and when clicking on each search result the link will open up in a modal window. So Ive used the code from the page http://www.queness.com/post/77/simple-jquery-modal-window-tutorial , The modal window wrks everywhere in the page except the jquery template section. my template coding goes like this

<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>

so when we click on the title link, instead of opening up in a modal window, the page move backs to top and “#dialog” appears next to the webapge address. Hw cn this be fixed?

The Javascript/jQuery coding goes like this

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

});

});

and the plain HTML part

<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

Your code seems fine, i pasted it into JsFiddle, and its behaving like it should: http://jsfiddle.net/3Dqen/

Could you try to see if you get any JS errors?

---

It might be that the link is inserted after the dom is loaded, and therefore it is not listed. Try using the LIVE function.

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