Open Modal on GridView Row Command

Notes on  How to Open Modal on GridView Row Command.  The Update Panel is important when doing it this way. 



Have the grid and the entire modal within a UpdatePanel.


In the Columns section 

 <asp:CommandField ShowSelectButton="True" SelectText="Detail" />

In the markup put function to

<script type = "text/javascript">
 function openModal() {
        $('#detailModal').modal('show');
    }
</script>

In the row command

 protected void grdDetail_RowCommand(object sender, GridViewCommandEventArgs e)
    {

        if (e.CommandArgument == string.Empty)
        {
            return;
        }

        int index = Convert.ToInt32(e.CommandArgument);
          

        if (e.CommandName.Equals("Select"))
        {
                
            ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "OpenDetailModalScript", "openModal()", false);

        }

    }

And to have the modal vertically, horizontally aligned

  .vertical-alignment-helper {
        display: table;
        height: 100%;
        width: 100%;
        pointer-events: none; /* This makes sure that we can still click outside of the modal to close it */
    }

    .vertical-align-center {
        /* To center vertically */
        display: table-cell;
        vertical-align: middle;
        pointer-events: none;
    }

    .modal-content {
        /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
        width: inherit;
        height: inherit;
        /* To center horizontally */
        margin: 0 auto;
        pointer-events: all;
    }

 The modal markup code


<div id="detailModal" class="modal fade" role="dialog">
    <div class="vertical-alignment-helper">
        <div class="modal-dialog  vertical-align-center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">
                             Detail
                    </h4>

                </div>
                <div class="modal-body">
<%-- your content--%>
</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>



Ref
http://www.programming-free.com/2013/02/gridviewrow-details-modalpopup-bootstrap.html
http://stackoverflow.com/questions/18053408/vertically-centering-bootstrap-modal-window