CODEWITHSUNDEEP
twitter-bootstrap-3bootstrap-modal
Alex Zakruzhetskyi
Alex Zakruzhetskyi

Reputation: 1433

Allow closing a modal when clicking outside

I used bootstrap-modal plugin for my project. But now I have an issue with closing my modal by clicking outside of it. I tried to pass the options like: data-backdrop="true", but it doesn't work. Any ideas of what's going wrong?

EDITED:

My modal is in a partial (using Rails)

<div id="editModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <div class="text-center">
          <div class="btn-group topbar header-buttons" role="group" aria-label="...">
            <%= link_to 'Add', '#addModal', { 'class' => 'btn btn-default', 'data-toggle' => 'modal', 'data-dismiss' => 'modal' } %>
            <%= link_to 'Edit', '#', class: 'btn btn-default disabled' %>
            <%= link_to 'Delete', '#deleteModal', { 'class' => 'btn btn-default', 'data-toggle' => 'modal', 'data-dismiss' => 'modal' } %>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <%= form_for (@change_office_address), remote: true, format: :json, html: { class: :contact_form } do |f| %>
          <div id="error_explanation" style='display:none;' class="bg-danger text-danger alert fade in alert-danger alert-dismissable errors">
            <ul>
              <% if @change_office_address.errors.any? %>
                <% @change_office_address.errors.full_messages.each do |msg| %>
                  <li><%= msg %></li>
                <% end %>
              <% end %>
            </ul>
          </div>
          <%= f.text_field :name, placeholder: 'Name', class: 'form-control' %>

          <br>
          <%= f.text_field :email, placeholder: 'e-mail', class: 'form-control' %> <br>
          <%= f.label :city_id %>
          <%= f.collection_select :city_id, City.order(:name), :id, :name,
                                  { include_blank: true }, { class: 'form-control' } %>
          <br>
          <%= f.label :insurer_id %>
          <%= f.collection_select :insurer_id, Insurer.order(:short_name), :id, :short_name,
                                  { include_blank: true }, { class: 'form-control' } %>
          <br>
          <%= f.label :office_id %>
          <%= f.collection_select :office_id, Office.order(:name), :id, :name,
                                  { include_blank: true }, { class: 'form-control' } %>
          <br>
          <%= f.text_area :edit_office_address, placeholder: 'New address', class: 'form-control', cols: '30',
                          rows: '5' %> <br>
          <div class="text-center">
            <%= f.submit, class: 'btn btn-default' %>
          </div>
        <% end %>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

I call a modal by: <%= link_to 'Edit', '#editModal', {'data-toggle' => 'modal'} %>

Thanks ahead!

Upvotes: 3

Views: 11037

Answers (2)

Alex Zakruzhetskyi
Alex Zakruzhetskyi

Reputation: 1433

I added this code, and now it's working:

$("#myModal").click(function(ev){
    if(ev.target != this) return;
    $('#myModal').modal('hide');
  });

Upvotes: 4

Luiz Gon&#231;alves
Luiz Gon&#231;alves

Reputation: 547

Backdrop option is true by default.

Check: http://getbootstrap.com/javascript/#modals-options

Make sure if you're call jquery.min.js and bootstrap.min.js correctly.

To test, press the Esc key and see if the modal is closed. By default, the keyboard option is also true.

If backdrop and keyboard doesn't working, there is a great chance you've called the .js wrongly.

Remember: call jquery.js BEFORE bootstrap.js.

If necessary, comment your console log here.

Finally, remember that Bootstrap does not support multiple modals.

Upvotes: 0

Related Questions