Bootstrap Modal clickable div

Question

I'm trying to make a div clickable that will open a modal. The div has a background image class on it. When you click the image a modal will pop up with gallery inside the modal. I'm having a hard time trying to figure this out. I'm not sure where the trigger goes. Do I use the bootstrap button trigger? Each of the "box's" has a background image on them. The code I have so far is:

<div class="row no-side-padding">
<div class="col-sm-3 no-side-padding-2">
<div class="assistants-box">
<h2>Assistants</h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="chairs-box">
<h2>Chairs</h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="craft-fairs-box">
<h2>Craft Fairs</h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="materials-box">
<h2>Materials</h2>
</div>
</div>
</div>

Solution 1

Here is where it's explained in the Bootstrap's Docs.

You can use the JS or the HTML way.

JS:

Basicly you should call on click:

$('#myModal').modal('show');

HTML Way:

On a button:

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

On an anchor:

The Other markup:

<div id="myModal" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">

                <!-- Header -->
                <div class="modal-header">
                    <h1>Header</h1>
                </div>

                <!-- Body -->
                <div class="modal-body">
                    <p>Body</p>
                </div>

                <!-- Footer -->
                <div class="modal-footer modal-footer--mine">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

Solution 2

This is the most simplest way to do it...

<code>
<div class="row no-side-padding">
<div class="col-sm-3 no-side-padding-2">
<div class="assistants-box">
<h2><a href="" data-toggle="modal" data-target="#assistants_modal">Assistants</a></h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="chairs-box">
<h2><a href="#chairs_modal" data-toggle="modal" data-target="#chairs_modal">Chairs</a></h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="craft-fairs-box">
<h2><a href="#craft_fairs" data-toggle="modal" data-target="#craft_modal">Craft Fairs</a></h2>
</div>
</div>
<div class="col-sm-3 five-padding-left no-padding-right">
<div class="materials-box">
<h2><a href="#target_modal" data-toggle="modal">Materials</a></h2>
</div>
</div>
</div>
</code>

Below is your modal for Chairs link...

<code>
<div id="chairs_modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<!-- Header -->
<div class="modal-header">
<h1>Header</h1>
</div>

<!-- Body -->
<div class="modal-body">
<p>Body</p>
</div>

<!-- Footer -->
<div class="modal-footer modal-footer--mine">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</code>

Below is your modal for Assitant link...

<div id="assitants_modal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">

<!-- Header -->
<div class="modal-header">
<h1>Header</h1>
</div>

<!-- Body -->
<div class="modal-body">
<p>Body</p>
</div>

<!-- Footer -->
<div class="modal-footer modal-footer--mine">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

And similarly the next two modals will be made for Craft Fairs and Materials

Comments

[Matthew Stott]

I'm not sure where to place that code though. Or where to put data-toggle="modal" data-target="#myModal"

[Stefan Dimov]

That is the html way. You should put those on the element that you want to be clicked to open. And replace #myModal with the id of your modal.

[Matthew Stott]

HI Stefan that worked. When I click the photo the modal pops up. I had another question for you.. When the modal pops up I want an image to pop up inside it with previous and next buttons. Like this: fearlessflyer.com/…

[Matthew Stott]

That code on that page wont work for me because it's pulling the images from li's that are on the page. How do i go about having it pull images from a folder on the server instead??