ASP.NET Web Forms Modal Form

Question

I am trying to duplicate/emulate the following type of form (that I see in some web sites). On Log In form when user clicks on Forgot Password link a modal form appears (right over the Log In Form) that has a instructions text on the top and a text box for user to enter his/her email. Does this type of Modal "Forget Password" form has to be created as just another ASP.NET web form? Or there is another approach?

Answer 1

Here's how you can accomplish this:

Create a button that opens the Modal and on the button click command add this to the code behind:

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

^ this will launch the following code.

 <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 modal popup

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

Your site master should include references to these local scripts (inside your script folder):

Answer 2

If you want to create a modal popup without using ajax/javascript try this method that only uses html & css: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

I modifed the modal div to hook up to a method in code-behind. You can do the same to make it send an email or do whatever else you like. Just remove the opacity attribute in css and set the modal div default visibility to visible=false, as shown below.

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# Code behind:

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
}