RegistrationForm With Modal Popup In MVC Using BootStrap

In this article i will show you how to design registration form using modal popup in mvc
write the code in your cshtml page
Example:-
Step1:- Take one button
<input type="button" value="Sumbit" id="btn1" />
Sterp2:-Wreite jquery code
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btn1").click(function()
            {
                $("#modalbox").modal("show")
            })
        })

    </script>

Step3:- Wreite the source code
    <div id="modalbox" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1>Register New Person</h1>
                </div>
                <div class="modal-body">
                    <table class="table table-condensed table-striped table-bordered">
                        <tr>
                            <td>First Name:</td>
                            <td>
                                <input type="text"  class="form-control" />
                            </td>
                        </tr>                    
                        <tr>
                            <td>Last Name:</td>
                            <td>
                                <input type="text" class="form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td>Address</td>
                            <td>
                                <textarea  class="form-control"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>City:</td>
                            <td>
                                <input type="text"  class="form-control" />
                            </td>
                        </tr>
                        <tr>
                            <td>State:</td>
                            <td>
                                <select class="form-control" title="Select State" >
                                    <option>AP</option>
                                    <option>TS</option>
                                    <option>UP</option>
                                    <option>MP</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td>Phone No:</td>
                            <td>
                                <input type="text"  class="form-control" />
                            </td>
                        </tr>                    
                        <tr>
                            <td>Email Address:</td>
                            <td>
                                <input type="email"  class="form-control" />
                            </td>
                        </tr>                    
                    </table>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Close</button>
                    <button class="btn btn-primary" data-bind="click:save">Ok</button>
                </div>
            </div>
        </div>

    </div>
Output:-