Bootstrap Modal clickable div

Question

Я пытаюсь сделать div clickable, который откроет модальный. На нем есть класс фонового изображения. Когда вы нажимаете изображение, модальный появится в галерее внутри модального. Я с трудом пытаюсь понять это. Я не уверен, где срабатывает триггер. Использовать триггер кнопки начальной загрузки? На каждом из «боксов» есть фоновое изображение. Код, который я до сих пор:

<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

Вот где это объясняется в Bootstrap's Docs.

Вы можете использовать JS или HTML-способ.

JS:

Основном вы должны позвонить по щелчку:

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

HTML Путь:

На кнопке:

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

на якорь:

Другая разметка:

<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> 

Answer 2

Simplistic jsFiddle Demo

Во-первых, вы должны перестроить свой HTML. Что-то вроде этого:

<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> 

Обратите внимание, что этикетка с возможностью клика (видимая) находится вне модального DIV.

Модальный DIV не является чем-то волшебным; это просто нормальный, скрытый DIV, который отображается (.show()), а все остальное покрывается наложением. Как правило, свойство css z-index используется для размещения надписи поверх содержимого и диалога поверх наложения. Это тривиально, чтобы сделать простой модальный диалог себя:

http://jsfiddle.net/07bvb5Lz/

При отображении модальной DIV, его DIV просто нескрываемым. Библиотеки, такие как Bootstrap и jQueryUI, могут автоматизировать эту простую задачу, а также добавить некоторое форматирование - внешнюю границу, центрирование и т. Д., Но содержимое DIV отображается при форматировании.

Чтобы ввести содержимое в модальное диалоговое окно, используйте метод .html() или некоторые аналогичные. например, щелчок триггерного элемента (кнопка, div и т. д.) может запустить событие AJAX, которое запрашивает данные из поиска базы данных, форматирует его, а затем (в обратном вызове) вставляет его в модальный div непосредственно перед его отображением.

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

---

Наконец, здесь это пост для получения основы AJAX - это действительно очень просто.

AJAX request callback using jQuery

Блочный код AJAX для приведенного выше примера будет выглядеть примерно так:

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

Ваш файл процессора PHP (мы назвали его your_php_processor_file.php) будет выглядеть примерно так:

<?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

Это самый простой способ сделать это ...

<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> 

Ниже ваш модальный для стульев связи ...

<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> 

Ниже Ваш модальный для Assitant ссылку ...

<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> 

И точно так же в ближайшие два модальности будет сделайте это для Craft Fairs and Materials