從頁面後面重新打開jquery模型對話框

我使用jQuery和css進行以下模式對話框，其中有一個登錄表單。從頁面後面重新打開jquery模型對話框

CSS：

#mask { 
    position:absolute; 
    z-index:9000; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: rgba(0,0,0,0.8);  
    opacity:0; 
    display:none; 

    } 

#boxes .window { 
    position:fixed; 
    width:440px; 
    height:200px; 
    display:none; 
    z-index:9999; 
    padding:20px; 

} 
/* Customize your modal window here, you can add background image too */ 
#boxes #dialog { 
    width:375px; 
    height:203px; 
    z-index: 99999; 
    background: #fff; 

}

在HTML（ASP頁）：

<!-- #dialog is the id of a DIV defined in the code below --> 
    <a href="#dialog" name="modal">Simple Modal Window</a> 
     <div id="boxes"> 

      <!-- #customize your modal window here --> 
      <div id="dialog" class="window">    

        <h5>Modal contents goes here</h5> 

        <!-- close button is defined as close class --> 
        <a href="#" class="close">X</a> 
      </div> 

      <!-- Do not remove div#mask, because you'll need it to fill the whole screen -->  
      <div id="mask"></div> 
     </div>

的Jquery：

<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 height 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, .window').hide(); 
      }); 

      //if mask is clicked 
      $('#mask').click(function() { 
       $(this).hide(); 
       $('.window').hide(); 
      }); 

     }); 
    </script>

現在，因爲這是登錄我希望服務器端驗證用戶名和密碼。如果驗證失敗，我希望從我的頁面（使用C＃）重新打開此對話框。現在我不知道該怎麼做。請給我任何幫助。

感謝

來源

2013-06-01 user2442653

你有沒有在你的頁面的任何更新面板？ – yogi

試試這個

HtmlElement dialogLink = webBrowser.Document.GetElementById(dialogLinkID); 
if (dialogLink != null) 
{ 
    dialogLink.InvokeMember("click"); // If invokemember does not work, try RaiseEvent("onclick") 
}

來源

2013-06-01 06:41:59

whats'webBrowser'？ – yogi

其Web瀏覽器控件檢查此：[MSDN]（http://msdn.microsoft.com/en-us/library/system.windows.forms.webbrowser.aspx） –

請檢查此以前回答的問題。 [**鏈路**]（http://stackoverflow.com/questions/11271875/how-do-i-use-document-getelementbyidname-click） –

創建的JavaScript/jQuery的一個函數來完成任務。

function doMyTask(){ 
    // do your task here 
}

呼叫從這個代碼javascript函數後面使用的ScriptManager

ScriptManager.RegisterStartupScript(this, this.GetType(), "functionToDoMyTask", "doMyTask();", true);

來源

2013-06-01 06:56:51 writeToBhuwan

試試這個

請在你的腳本

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

    openModal(id); 
    }); 

    //if close button is clicked 
    $('.window .close').click(function (e) { 
     //Cancel the link behavior 
     e.preventDefault(); 
     $('#mask, .window').hide(); 
    }); 

    //if mask is clicked 
    $('#mask').click(function() { 
     $(this).hide(); 
     $('.window').hide(); 
    }); 

}); 

function openModal(id) { 
    //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 }); 

    //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); 
}

這是做一個全球性的方法的變化不大openModal()可以從服務器端調用。

現在，

我假設你有一個asp按鈕，火災後回來做這在它的C＃代碼（服務器端）

// Your button 
<asp:Button runat="server" ID="btn" Text="Button" OnClick="clicked" /> 

protected void clicked(object sender, EventArgs e) 
{ 
    // If you don't have update panel 
    Page.ClientScript.RegisterStartupScript(
        this.GetType(), 
        "key001", 
        "openModal('#dialog')", 
        true); 
    // If you have update panel 
    ScriptManager.RegisterStartupScript(
        this, 
        this.GetType(), 
        "key001", 
        "openModal('#dialog')", 
        true); 
}

來源

2013-06-01 07:07:42 yogi

從頁面後面重新打開jquery模型對話框

回答

相關問題