add bootstrap model popup opening and closing effects on ajax modelpopup extender

Here I have created sample that will help you out.

HTML

<div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
    <link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'
        media="screen" />
    <script type="text/javascript" src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
    <script type="text/javascript">
        function ShowPopup() {
            $('#pnlPopup').modal('show');
            return false;
        }
        function HideModal() {
            var modalPopup = $find('mpe');
            modalPopup.hide();
            $('#pnlPopup').modal('hide');
            return false;
        }
        function pageLoad() {
            var modalPopup = $find('mpe');
            modalPopup.add_shown(function () {
                modalPopup._backgroundElement.addEventListener("click", function () {
                    modalPopup.hide();
                    $('#pnlPopup').modal('hide');
                });
            });
        };
    </script>
    <style type="text/css">
        .overrideClass
        {
            left: 0px !important;
            top: 0px !important;
        }
    </style>
    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </cc1:ToolkitScriptManager>
    <asp:Button ID="btnShow" runat="server" class="btn" Text="Show Modal Popup" OnClientClick="return ShowPopup()">
    </asp:Button>
    <cc1:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="mpe" runat="server"
        PopupControlID="pnlPopup" TargetControlID="btnShow" BackgroundCssClass="modalBackground">
    </cc1:ModalPopupExtender>
    <div class="overrideClass">
        <asp:Panel ID="pnlPopup" runat="server" class="modal fade overrideClass">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" aria-label="Close" onclick="HideModal()">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">
                            Modal title</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" onclick="HideModal()">
                            Close</button>
                        <button type="button" class="btn btn-primary" onclick="HideModal()">
                            Save changes</button>
                    </div>
                </div>
            </div>
        </asp:Panel>
    </div>
</div>

Screenshot