Показ мод загрузки с использованием JavaScript на клике

Ответ 1

Вам не нужен onclick. Предполагая, что вы используете Bootstrap 3 Документация Bootstrap 3

<div class="span4 proj-div" data-toggle="modal" data-target="#GSCCModal">Clickable content, graphics, whatever</div>

<div id="GSCCModal" class="modal fade" tabindex="-1" role="dialog" 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">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Если вы используете Bootstrap 2, вы должны следовать разметке: http://getbootstrap.com/2.3.2/javascript.html#modals

Ответ 2

Я искал опцию onClick для установки заголовка и тела модального вида на основе элемента в списке. Ответ T145 очень помог, поэтому я хотел поделиться тем, как я его использовал.

Убедитесь, что тег, содержащий функцию JavaScript, имеет тип text/javascript, чтобы избежать конфликтов:

<script type="text/javascript"> function showMyModalSetTitle(myTitle, myBodyHtml) {

   /*
    * '#myModayTitle' and '#myModalBody' refer to the 'id' of the HTML tags in
    * the modal HTML code that hold the title and body respectively. These id's
    * can be named anything, just make sure they are added as necessary.
    *
    */

   $('#myModalTitle').html(myTitle);
   $('#myModalBody').html(myBodyHtml);

   $('#myModal').modal('show');
}</script>

Эту функцию теперь можно вызывать в методе onClick из элемента, такого как кнопка:

<button type="button" onClick="javascript:showMyModalSetTitle('Some Title', 'Some body txt')"> Click Me! </button>

Ответ 3

Сначала необходимо выполнить функцию JavaScript, которая содержит то, что вы хотите сделать:

function print() { console.log("Hello World!") }

а затем эту функцию нужно вызывать в методе onClick изнутри элемента:

<a onClick="print()"> ... </a>

Вы можете узнать больше о модальных взаимодействиях непосредственно из документации Bootstrap 3, найденной здесь: http://getbootstrap.com/javascript/#modals

Ваше модальное связывание также неверно. Это должно быть что-то вроде этого, где "myModal" = идентификатор элемента:

$('#myModal').modal(options)

Другими словами, если вы действительно хотите сохранить то, что у вас уже есть, поставьте "#" перед GSCCModal и посмотрите, работает ли это.

Также не очень разумно иметь привязку onClick к элементу div; что-то вроде кнопки будет более подходящим.

Надеюсь, это поможет!

Ответ 4

У меня была та же проблема, после долгих исследований я наконец-то создал функцию js для динамического создания модов в соответствии с моими требованиями. Используя эту функцию, вы можете создавать всплывающие окна в одной строке, такие как:

puyModal({title:'Test Title',heading:'Heading',message:'This is sample message.'})

Или вы можете использовать другие сложные функции, такие как iframes, видео всплывающие окна и т.д.

Найдите его на https://github.com/aybhalala/puymodals. Для демонстрации перейдите по ссылке http://pateladitya.com/puymodals/.