How to remove backdrop only from modal

Question

I am currently using twitter bootstrap and recently I was having an issue with the backdrop not closing when closing a modal.

Solved with:

 $('.modal-backdrop').hide();

The problem with this solution is, it removes the backdrop from the whole page. And I still need it when the page loads some funcionalities, so that the user doesn't check or uncheck a field in this process.

Below the code for the modal:

    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog ">
            <!-- Modal content-->

            <div class="modal-content">
                <div class="modal-header">
                    <asp:HiddenField ID="hfImg" runat="server" />
                </div>
                <div class="modal-body" style="overflow: auto; align-content: center;">
                    <div class="col-sm-12">

                        <div id="views"></div>

                    </div>
                </div>
                <div class="modal-footer">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="col-sm-1 pull-left">
                                <button type="button" class="btn btn-primary" data-dismiss="modal";">Cancelar</button>
                            </div>
                            <div class="col-sm-1 col-sm-offset-8">
                                <button id="cropbutton2" class="btn btn-primary pull-right" type="button" onclick="applyCrop();">Cut</button>
                            </div>
                            <div class="col-sm-1 col-sm-offset-1">
                                <asp:Button runat="server"  CssClass="btn btn-primary pull-right" ID="save" Text="Edit" OnClick="btnEdit_Click" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

c# behind the save button:

     btnEdit_Click(object sender, EventArgs e) 
     {
      ...
      ...
      ...
      ...
      ...
      ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "modal", "closeModal();", true);
      }

And the javascript for the CloseModal():

      function closeModal() {
        $('.modal-backdrop').hide();
        $('body').removeClass('modal-open');
        $('#myModal').modal('hide');
        $('#<%=hfImg.ClientID%>').val("");
    }

Can someone help me, I don't have much experience with this framework, and don't even know if this is being done in the proper way.

Ps: This page is an ascx

EDIT: This project I am working is old and I did not work in the process of developing it.

But right now I am just giving it a little support and maintanance. Turns out there is an architectural problem here. The original devs tried to make a workarround with the fullpostbacks the page always does in a client-control structure making all those controls inside update panels.

Because of the technology involved (Ajax and stuff) they didn't want it to be doing a full postback everytime user-client checked or uncheked something or opened a submenu in another tab. So they made it all look like the page is still there only making little updates on the update panels.

The backdrop is defined on Master for such purpose.

Only happens that my bootstrap loses reference to the real objects it was referencing before because the page gets a postback whenever you change anything (including close the modals). So when I do a .hide or .remove on the modal backdrop, bootstrap is actually aiming at the only reference it can find, thus the one defined on master page.

So because it would be a lot more work and use a lot more of time than we can handle, we decided to leave the modal without a backdrop, using data-backdrop: false on the modal markup.

Thanks everyone for the help.

Solution

Simple, put data-backdrop="false" on the button which triggers the model or

$("#myBtn2").click(function(){
    $("#myModal").modal({backdrop: false});
});

here is the full reference

Comments

[Lucas Hipólito]

data-backdrop=''false" doesn't suit. It disables the backdrop for the modal. I want it on when the modal is open. But the problem is how to I remove the backdrop when the modal closes only for the modal and not the whole page? Besides, I believe this piece of code has a wrong syntax, my navigator gave me errors in the screen using it

[Rahul Reghunath]

check the bootstrap modal documentation page which I gave above, and give some code sample

[Karan Singh]

you don't want backdrop when the popup is open?

[Lucas Hipólito]

I want the backdrop when the popup is open, and closed when pop-up is out. A thing that doesn't happen naturally (That is why I forced with $('modal-backdrop').hide()) that later changed to .remove() The thing is that when I remove (or hide) the backdrop in this instance, it removes/hides from the whole page, and I need it when there are some updates on the panels, so that the user doesn't check or uncheck anything while interacting directly with the database.