Bootstrap Modal: make the whole columns clickable

Question

I am testing on this website some modal windows and as you can see now the modals are toggled on click / touch on the play button.

My question is: is possible to make the whole columns clickable and make the modals open?

I tried to define also a data-toggle for the whole div with the data-target without any results.

This is the HTML code:

<!-- Button trigger modal -->
<i class="fa fa-play btn btn-lg" aria-hidden="true" type="button" data-toggle="modal" data-target="#myModal"></i>
</div>
<!-- Modal -->
<div class="modal fade modal-video" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
 <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Title 1</h4>
  </div>
  <div class="modal-body">
      <video controls="" width="100%" id="video">
      <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
      </video>
      <div class="modal-text">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
      </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn button-eh-magenta">Go to Shop</button>
    <a href=""><button type="button" class="btn button-eh-magenta">Share</button></a>
  </div>
</div>

Ebrahim Poursadeqi Ebrahim Poursadeqi · Accepted Answer · 2017-07-17T13:30:16

You can assign an id for your div that you want on clicking on that open modal and do like this:

$('#specified_div').click(function(){
    $('#targetmodal').modal();
});

Another way is to add data-toggle="modal" and data-target="#targetmodal" to any element that you want by clicking on that element modal with id targetmodal open.

and Here is bootstrap site quote:

Via data attributes

Activate a modal without writing JavaScript. Set data-toggle="modal" on a controller element, like a button, along with a data-target="#foo" or href="#foo" to target a specific modal to toggle.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
Via JavaScript

Call a modal with id myModal with a single line of JavaScript:
$('#myModal').modal(options)

Bootstrap Modal: make the whole columns clickable

1 Answers