title: How to remove backdrop only from modal
body: <p>I am currently using twitter bootstrap and recently I was having an issue with the backdrop not closing when closing a modal.</p>
  
  <p>Solved with:</p>
  
  <pre><code> $('.modal-backdrop').hide();
  </code></pre>
  
  <p>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.</p>
  
  <p>Below the code for the modal:</p>
  
  <pre><code>    &lt;div class="modal fade" id="myModal" role="dialog"&gt;
          &lt;div class="modal-dialog "&gt;
              &lt;!-- Modal content--&gt;
  
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;asp:HiddenField ID="hfImg" runat="server" /&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body" style="overflow: auto; align-content: center;"&gt;
                      &lt;div class="col-sm-12"&gt;
  
                          &lt;div id="views"&gt;&lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                              &lt;div class="col-sm-1 pull-left"&gt;
                                  &lt;button type="button" class="btn btn-primary" data-dismiss="modal";"&gt;Cancelar&lt;/button&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-1 col-sm-offset-8"&gt;
                                  &lt;button id="cropbutton2" class="btn btn-primary pull-right" type="button" onclick="applyCrop();"&gt;Cut&lt;/button&gt;
                              &lt;/div&gt;
                              &lt;div class="col-sm-1 col-sm-offset-1"&gt;
                                  &lt;asp:Button runat="server"  CssClass="btn btn-primary pull-right" ID="save" Text="Edit" OnClick="btnEdit_Click" /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>c# behind the save button:</p>
  
  <pre><code>     btnEdit_Click(object sender, EventArgs e) 
       {
        ...
        ...
        ...
        ...
        ...
        ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "modal", "closeModal();", true);
        }
  </code></pre>
  
  <p>And the javascript for the CloseModal():</p>
  
  <pre><code>      function closeModal() {
          $('.modal-backdrop').hide();
          $('body').removeClass('modal-open');
          $('#myModal').modal('hide');
          $('#&lt;%=hfImg.ClientID%&gt;').val("");
      }
  </code></pre>
  
  <p>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.</p>
  
  <p>Ps: This page is an ascx</p>
  
  <p>EDIT:
  This project I am working is old and I did not work in the process of developing it. </p>
  
  <p>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.</p>
  
  <p>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. </p>
  
  <p>The backdrop is defined on Master for such purpose. </p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Thanks everyone for the help.</p>