Вставка значения в модальное окно Bootstrap 3


Бывают случаи, когда необходимо по клику на кнопку, вывести модальное окно Bootstrap с подтверждением какого либо действия.
В этой статье я покажу готовое решение.

Допустим, имеем такую кнопку, которая вызывает модальное окно Bootstrap 3:

<a data-toggle="modal" value="<?= $file ?>" data-target=".bs-example-modal" onclick="newVal(this)" href="#"><span class="glyphicon glyphicon-remove"></span></a>

В данном случае, значение (value) кнопки – это имя удаляемого файла. По нажатию на кнопку, необходимо передать в модальное окно Bootstrap это значение. Затем в модальном окне Bootstrap, при нажатии на кнопку «ОК» происходит передача этого параметра (к примеру) PHP скрипту.

Вот само модальное окно Bootstrap:

<div class="modal fade bs-example-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" 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">Удаление</h4>
      </div>
      <div class="modal-body">
        <p>Действительно хотите удалить этот файл?</p>
      </div>
      <div class="modal-footer">
        <button id="butOk" type="submit" name="delete" value="" class="btn btn-danger">ОК</button>
        <button type="button" class="btn btn-success" data-dismiss="modal">Отмена</button>
      </div>
    </div>
  </div>
</div>

А вот скрипт, который отвечает за передачу этого значения в модальное окно Bootstrap:

<script type="text/javascript">
function newVal(t){
	var res = $(t).attr('value');	
	$('#butOk').val(res); 
  	return false;
}
</script>

При нажатии на ссылку/кнопку, происходит действие onclick="newVal(this)"
Вызывается JavaScript функция newVal, которая берет у этой кнопки значение value, и подставляет его в значение value объекта с id="butOk". В моем случае это кнопка.


Оцените статью или поделитесь ей в соцсетях:

+ 0 | - 0

Рекомендуемые статьи:


Комментарии

  1. Аноним 13 сентября 2015

    Все работает!

Оставьте комментарий!

Поля обозначенные как * требуются обязательно. Перед постингом всегда делайте просмотр своего комментария.