问题描述:

I am facing interestingly weird behaviour of bootstrap "Modal" in my rails application. I have witnessed this previously, but never cared to dig. But as i face it again, i HAD to. After hours of digging, i came to know the cause, but don't how to troubleshoot it and why is it happening.

Scenario:

Simple, I have a link and when its clicked, modal appears. When i change the content of body of the modal, sometimes the link is not clickable... After hours of head banging.. when i inspected using chrome dev tools, i found that the "Modal" which was hiding before the link is clicked is overshadowing the clickable link also.

Now i want to know how to troubleshoot it and know why is it blocking the link when its hiding ?

Code:

<%= link_to "All Group", '#', :data => {:toggle => 'modal', :target => '#AdminMessageAll'} %> </li>

<div class="modal fade" id="AdminMessageAll" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>

<h4 class="modal-title" id="myModalLabel"> Send Message (to all group) </h4>

</div>

<div class="modal-body" style="height:300px; width:300px">

<%= render 'group_message_all' %>

</div>

<div class="modal-footer" data-dismiss="modal" aria-hidden="true">

<p class = "btn btn-info" > Close </p>

</div>

</div>

</div>

</div>

相关阅读:
Top