从后面页面重新打开jquery模型对话框

本文关键字：jquery 模型 新打开 对话框 | 更新日期: 2023-09-27 18:16:26

我已经使用jquery和css，其中有一个登录表单的模态对话框。

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 page):

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

现在，因为这是登录表单，我希望服务器端验证用户id和密码。如果验证失败，我希望从后面的页面重新打开这个对话框(使用c#)。现在我不知道该怎么做了。请给我一些帮助。

谢谢

从后面页面重新打开jquery模型对话框

试试这个

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

在Javascript/jQuery中创建一个函数来执行任务。

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

使用scriptmanager

从后面的代码调用这个javascript函数
ScriptManager.RegisterStartupScript(this, this.GetType(), "functionToDoMyTask", "doMyTask();", true);

试试这个

在你的脚本中做一点改变

$(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);
}
相关文章：