modales Fenster wird nicht geöffnet

Question

Ich versuche, eine modale Fensteroption zu meiner Webseite hinzuzufügen. Es ist eine Suchseite und wenn Sie auf jedes Suchergebnis klicken, öffnet sich der Link in einem modalen Fenster. So habe ich den Code von der Seite http://www.queness.com/post/77/simple-jquery-modal-window-tutorial, das modale Fenster wrks überall auf der Seite mit Ausnahme der jquery Vorlagenabschnitt verwendet. meine Vorlage Codierung geht so

<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, wenn wir auf den Titel Link klicken, statt Öffnung in einem modalen Fenster, die Seite bewegen Rücken nach oben und „#dialog“ erscheint neben dem webapge Adresse. Hw cn das behoben werden?

Die Javascript/jQuery-Codierung geht so

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

}); 

});

und die einfache HTML-Teil

<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

Ihr Code scheint in Ordnung, ich es in JsFiddle eingefügt, und seine verhalte wie es sollte: http://jsfiddle.net/3Dqen/

Könnten Sie versuchen, wenn Sie irgendwelche JS Fehler zu sehen bekommen, ?

---

Es kann sein, dass die Verknüpfung eingefügt wird, nachdem das Dom geladen wurde, und daher ist es nicht aufgeführt. Versuchen Sie es mit der LIVE-Funktion.

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