Question

我正在尝试复制/模拟以下类型的表单（我在某些网站上看到）。在用户单击“忘记密码”链接时，在“登录”窗体中，将显示一个模式窗体（位于“登录表单”上方），顶部有一个说明文本，另一个文本框用于输入他/她的电子邮件。是否必须将此类型的Modal“忘记密码”表单创建为另一个ASP.NET Web表单？还是有另一种方法？

Answer 1

以下是如何实现这一目标的：

创建一个打开Modal的按钮，然后在按钮上单击命令将其添加到后面的代码中：

  ScriptManager.RegisterStartupScript(this, GetType(), "ModalPopup", "ModalPopup()", true);

^这将启动以下代码。

 <div id = modalpopup style="display:none;">
 <asp:Table runat = "server">
 <asp:TableRow>
           <asp:TableCell HorizontalAlign="Right">Textbox:</asp:TableCell>
            <asp:TableCell HorizontalAlign="Left">
                 <asp:Table runat="server">
                    <asp:TableRow>
                        <asp:TableCell>
                            // textbox here
                        </asp:TableCell>
                    </asp:TableRow>
                     </asp:Table>
            </asp:TableCell>
        </asp:TableRow>     
 </asp:Table>
          <asp:Button runat="server" ID="btnAddTransaction" Style="display: none" Text="Submit" OnClick="btnAddModalTransaction_Click" ValidationGroup="Transaction" CausesValidation="true" />
          <asp:Button ID="btnCancelAddTransaction" runat="server" Style="display: none" Text="Cancel" OnClick="btnCancelAddTransaction_Click" CausesValidation="false" />

 </div>

// --------------- Javascript模式弹出

          function ModalPopup() {
        $("#modalpopup ").dialog({
            modal: true,
            width: 800,
            appendTo: "form",
            open: function () {


                // The two lines below are 2 different ways to ensure the 
                // background is completely grayed out if the modal is larger
                // then the page. The first was chosen so that the scroll
                // bars are not disabled.
                $('.ui-widget-overlay').css('position', 'fixed');
                //$('body').css('overflow', 'hidden');
                $(this).dialog('option', 'position', 'center');
            },
            buttons: {
                "Submit": function () {                                        
                   $("[id*=btnAddTransaction]").click();                             
                },

                "Cancel": function () {                        
                    if (confirm("Are you sure you want to cancel ?")) {
                        $("[id*=btnCancelAddTransaction]").click();                            
                    }
                }
            },
            close: function (ev, ui) {
                $(this).remove();                  
                $('.ui-widget-overlay').css('position', 'absolute');
            }
        });

您的网站管理员应该包含对这些本地脚本的引用（在脚本文件夹中）： enter image description here

Answer 2

如果你想在不使用ajax / javascript的情况下创建模态弹出窗口，请尝试使用仅使用html＆amp; css：http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

我修改了模态div以连接到代码隐藏中的方法。您也可以这样做，以便发送电子邮件或做任何您喜欢的事情。只需删除css中的opacity属性，并将modal div默认可见性设置为visible = false，如下所示。

CSS：

</style>    
    .modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
    }
    .modalDialog > div {
        width: 400px;
        position: relative;
        margin: 10% auto;
        margin-left:20%;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }
    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }
    .close:hover { background: #00d9ff; }
</style>

HTML：

<asp:Button ID="btnOpenModal" runat="server" Text="Open Modal Window" OnClick="btnOpenModal_Click" />
<br />
<div id="divModal" runat="server" class ="modalDialog" visible="false">
    <div>
        <asp:LinkButton ID="lbtnModalClose" runat="server"  CssClass="close" Text="X" OnClick="CloseModal" />
        <h2>Modal Box</h2>
        <p>This is a sample modal box that can be created using CSS3.</p>
        <br />
        <asp:Button ID="btnEmail" runat="server" Text="Send Email" Onclick="SendEmail" />
        <asp:Button ID="btnClose" runat="server" Text="Close" OnClick="CloseModal" />
    </div>
</div>

C＃代码背后：

protected void btnOpenModal_Click(object sender, EventArgs e)
{
    divModal.Visible = true;
}
protected void CloseModal(object sender, EventArgs e)
{
    divModal.Visible = false;
}
protected void btnEmail(object sender, EventArgs e)
{
    //put your code here that sends an email
}

ASP.NET Web窗体模式窗体

2 个答案: