0

I have a controller in my Rails application which calls a js partial when a certain condition is met:

my_controller

if false == validation_result  
  render :partial => 'my/show_modal.js.erb'
end

_show_modal.js.erb

$("#modal_content").html("<%= escape_javascript(render 'my/show_modal') %>");
$("#notify").modal('show');

The html.erb called from above code renders a modal as shown below:

_show_modal.html.erb

<div class="modal fade" tabindex="-1" id="notify" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content" style="width:1000px;margin-left:-285px !important;">
      <div class="modal-body">
        <h3 class="modal-title">Please review</h3>
        <span style="float: right">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </span>
      </div>
    </div>
  </div>
</div>

The modal renders fine; but when I click on Ok button on the modal, the modal dismisses fine as well but leaves behind a light gray scheme on the entire webpage (the webpage seems to loose focus and I have to refresh the page to be able to use it again)!

What am I doing wrong here? How do I dismiss the modal completely so that the webpage could be used again?

UPDATE:

I tried almost all the approaches suggested in how to destroy bootstrap modal window completely? but NONE of them work for me.

I even posted comments on a few approaches listed on the above page stating the backdrop still does not go away for me.

Biju
  • 820
  • 1
  • 11
  • 34

1 Answers1

0

Maybe this is a very ancient-minded-approach but it supposed to work. Assign hideModal() function on click event and see the result.

function hideModal() {
    $("#notify").css("display", "none"); // Removing modal container
    $(".modal-backdrop").css("display", "none"); // Removing semi-transparent black background
    $(".modal-open").css("overflow-y", "auto"); // Enabling vertical scrolling back
}
zonay
  • 1,453
  • 9
  • 17