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>

Answer 1

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

Answer 2

Simplistic jsFiddle Demo

First, you have to restructure your HTML. Something like this:

<div class="col-sm-3 no-side-padding-2">
    <h2>Assistants</h2>
    <div id="assistants-box" class="modal_box">
        Contents of the ASSISTANTS box
    </div>
</div>

Note that the clickable (visible) label is outside the modal DIV.

A modal DIV is nothing magical; it is just a normal, hidden DIV that gets displayed (.show()) while everything else is covered by an overlay. Generally, the z-index css property is used to place the overlay on top of the content, and the dialog on top of the overlay. It is trivial to make a simple modal dialog yourself:

http://jsfiddle.net/07bvb5Lz/

When the modal DIV is displayed, its DIV is merely unhidden. Libraries like Bootstrap and jQueryUI may automate this simple task, and also add some formatting - an outer border, centering, etc - but the contents of the DIV are displayed as they are formatted.

To inject content into a modal dialog, use the .html() method or some similar. for example, clicking a trigger element (button, div, etc) could launch an AJAX event that requests data from a database lookup, formats it, and then (in the success callback) sticks it into the modal div just before it is displayed.

http://jsfiddle.net/07bvb5Lz/1/

---

Finally, here is a post for getting the basics of AJAX -- it is really very simple.

AJAX request callback using jQuery

The AJAX code block for the above example would look something like this:

http://jsfiddle.net/07bvb5Lz/2/

Your PHP processor file (we named it your_php_processor_file.php) would look something like this:

<?php
    $el = $_POST['elementID']; //value will be contents of js variable myId

    //Do your mysql lookup using the received value
    $mysql_recd = 'do_your_lookups_here';
    if ($mysql_recd = 'bob'){
        $tmp = 'http://placekitten.com/450/330';
    }else{
        $tmp = 'http://placekitten.com/450/320';
    }

    $out = '
        <img src="' .$tmp. '" />
        <input type="button" id="shutme" value="Close" />
    ';
    echo $out;
?>

Answer 3

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>