Menu
I link to a bootstrap modal as shown below; however, after one round of open/close the modal stops responding to clicks. I have tried to replacing the code with the example from bootstrap documentation and it works. I'm unsure where to begin debugging.
<div class="modal fade" id="campaign-slider-content" tabindex="-1" aria-hidden="true" data-backdrop="true">
<div class="modal-dialog modal-lg" style="overflow-y: scroll; max-height:100%;">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<%= link_to image_tag(campaign.featured_image.url(:crowdreview_cropped), width: '288')
campaign_slider_detail_path(campaign.id), data: { toggle: 'modal', target: '#campaign-slider-content'}%>
636
When the Button is clicked, the HTML DIV is referenced using jQuery and its modal function is called along with properties data-backdrop: "static" and data-keyboard: false which disables the closing of the Bootstrap Modal Popup when clicked outside.
Data-keyword="false" is to prevent closing modal while clicking Esc button, while data-backdrop="static" , allows you keep modal pop-up opened when clicking on Gray area.
The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not.
You're not closing the modal properly. You need to change:
<button type="button" class="close" data-dismiss="#campaign-slider-content" aria-hidden="true">×</button>
to:
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
