2012-01-02 11 views
1

ページビューと呼ばれるセッション変数があります。私のページがロードされるとき、私はそれが2と等しいかどうかを確認するチェックを持っています。私はウィンドウを開くためにコードを実行したいのですか?今、私はそのウィンドウを開くためのリンクをクリックすることができ、それは正常に動作します。ページが読み込まれたら自動的に開くようにするにはどうすればいいですか?ページロード時にJquery関数を呼び出す

私のページでjQueryとセッションCheckcコード

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<% if (Session["PagesViewed"].ToString() == "2") 
    { %> 
<script type="text/javascript"> 
    $(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(); 
     }); 

    }); 
</script> 

<% } %> 

このリンクは、ページを開くために使用されます。しかし、私は、ページが読み込まれるときに自動的にこれを行うには。

 //Get the A tag 
     var id = $('a[name=modal]').attr('href'); 

及び})を除去するために

<a href="#dialog" name="modal">Simple Window Modal</a> 

答えて

1

変化

$('a[name=modal]').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 

     //Get the A tag 
     var id = $(this).attr('href'); 

$(id).fadeIn(2000); 

    }); 
1

後にここでは、自動的にそのアンカーのクリックイベントをトリガすることができます方法は次のとおりです。

$("a[name='modal']").click(); 
+0

これは最も簡単で変更の必要は最小限に抑えられますが、そのリンクに関連付けられている他のイベント(クリックトラッキング分析など)も発生します。あなたが私の解決策を試して避けるためにしたい場合。 – mVChr

0
$(document).ready(function() { 

    var openModal = function (e) { 
     // Cancel the link behavior if click event 
     e && e.preventDefault(); 

     // Get the A tag or default to modal link href 
     var id = $(this).attr('href') || $('a[name=modal]').attr('href'); 

     // ...REST OF CODE FROM FUNCTION... 
    }; 

    $('a[name=modal]').click(openModal); 

    openModal(); 

}); 
0

入れコードのような$(document).ready(function() {})

何か内部のモーダルウィンドウをロードするために:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<% if (Session["PagesViewed"].ToString() == "2") 
{ %> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     //Get the A tag 
     var id = $('a[name=modal]').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(); 
    }); 

    }); 
</script> 
関連する問題