Edit option in Modal of Bootstrap

Question

Hi all,

I am newbie to Bootstrap and MVC. I have created a bootstrap modal and want to make it editable.

How can I do this. My code is:-

<div id="fullCalModalEvent" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                   @* <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button>*@
                    <h4 id="modalTitle" class="modal-title"></h4>
                </div>
                <div id="modalBody" class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" id="btnEdit" class="btn  btn-default ">Edit</button>
                    <button type="button" id="btnUpdate" class="btn btn-default "> Update</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                   @* <button class="btn btn-primary"><a id="eventUrl" target="_blank">Event Page</a></button>*@
                </div>
            </div>
        </div>
    </div>

eventClick: function (event) {
                        if (event.title) {
                           
                            $('#modalTitle').html(event.title);
                            $('#modalBody').html("Project Description : " + event.description + "<br>" + "Created By : " + event.createdby + " ON: " + event.craeteddate );
                            $('#fullCalModalEvent').modal();
                        }

I want to make the above modal editable when use clicks on "Edit" button. Please suggest me how to do it.

Thanks for your help.