Вставка значения в модальное окно 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">×</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"
. В моем случае это кнопка.
Оцените статью или поделитесь ей в соцсетях:
Рекомендуемые статьи:
Комментарии
Все работает!