Question

我使用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页面）中：

<!-- #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＃）重新打开此对话框。现在我不知道怎么做。请给我任何帮助。

由于

Answer 1

试试这个

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

Answer 2

在Javascript / jQuery中创建一个函数来完成任务。

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

使用scriptmanager

从后面的代码调用此javascript函数

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

Answer 3

试试这个

对您的脚本进行一些更改

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

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

3 个答案: