• 4/10/2013
• 12054
• modalbox popup, jQuery popup, fancybox alternative, lightbox alternative, rudra softtech llp

Displaying an asp.net form in modalbox is very simple.

Example

Click Here to Subscribe

Code

ASP.Net Form

<div style="display:none;" id="subscribemodal">
    <div class="modal-header">
        <button type="button" id="subscribeboxclosebtn" class="close">
            ×</button>
        <h3>
            Register</h3>
    </div>
    <div class="modal-body">
        <fieldset>
                    <div class="control-group">
                        <label class="control-label" for="<%: EmailTextBox.ClientID %>">
                            Email</label>
                        <div class="controls">
                            <asp:TextBox CssClass="input-xlarge" ID="EmailTextBox" MaxLength="200" runat="server"></asp:TextBox>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="<%: NewsletterCheckBox.ClientID %>">
                            Newsletter</label>
                        <div class="controls">
                            <label class="checkbox">
                                <asp:CheckBox ID="NewsletterCheckBox" Checked="true" runat="server" />
                            </label>
                        </div>
                    </div>
        </fieldset>
    </div>
    <div class="modal-footer">
        <asp:Button ID="SubmitButton" class="btn btn-primary" ValidationGroup="loginboxgrp"
            runat="server" Text="Register" OnClick="SubmitButton_Click" />
    </div>
</div>

Script

<link href="modal.css" rel="Stylesheet" />
<link href="modal-darktheme.css" id="modaltheme"
    rel="Stylesheet" />
<script src="modal.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#inline").modalbox({
            Type: 'inline',
            Width: 550,
            Height: 420,
            CloseHandle: $("#subscribemodal  .close"), ShowClose : false
        });
    });
</script>

Share It

• Tweet