1

我使用 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>

查询：

<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#）。现在我不知道该怎么做。请给我任何帮助。

谢谢

4

3 回答 3

0

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

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

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

ScriptManager.RegisterStartupScript(this, this.GetType(), "functionToDoMyTask", "doMyTask();", true);
于 2013-06-01T06:56:51.243 回答
0

尝试这个

HtmlElement dialogLink = webBrowser.Document.GetElementById(dialogLinkID);
if (dialogLink != null)
{
     dialogLink.InvokeMember("click"); // If invokemember does not work, try RaiseEvent("onclick")
}
于 2013-06-01T06:41:59.027 回答
0

尝试这个

对你的脚本做一点改动

$(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-01T07:07:42.320 回答