0

Webページにモーダルウィンドウオプションを追加しようとしています。これは検索ページであり、各検索結果をクリックすると、リンクがモーダルウィンドウで開きます。そのため、 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>
4

1 に答える 1

0

あなたのコードは問題ないようです、私はそれを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); 
});
于 2012-04-12T11:54:30.560 に答える