Как reset загрузочный модальный, когда он закрывается, и снова открывать его снова?
У меня есть список в модуле bootstrap и кнопке.
При нажатии кнопки появляется новая кнопка внутри div в модальном режиме.
Когда я закрываю модальный и снова открываю его, последняя операция, выполняемая в модальном стиле, как кнопка, представленная ранее, все еще присутствует в модальном режиме.
Как reset модальный, чтобы при возобновлении модальности кнопка не присутствовала, и пользователь снова может выбрать опцию из списка и нажать кнопку, чтобы отобразить новую кнопку и т.д.
<!-- Modal -->
<div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Select Language</h4>
</div>
<div class="modal-body">
<button type="button" class="btn" data-dismiss="modal">Close</button>
<button type="button" class="btn" id="submit_form">Submit</button>
<div class="modal-body1">
<div id="placeholder-div1">
</div>
</div>
</div>
<div class="modal-footer">
<script>
$('#submit_form').on('click', function() {
$(".modal-body1").html('<h3>test</h3>');
});
</script>
<script>
$(function(){
$('.modal-footer').click(function() {
$('.modal').modal('hide');
});
});
</script>
</div>
</div>
</div>
</div>
- Обновить ---
Почему это не работает?
<script type="text/javascript">
$(function(){
$('#myModal').on('hidden.bs.modal', function (e) {
console.log("Modal hidden");
$("#placeholder-div1").html("");
});
});
</script>
Ответы
Ответ 1
Просто reset любое содержимое вручную, когда модальное скрыто:
$(".modal").on("hidden.bs.modal", function(){
$(".modal-body1").html("");
});
Больше событий. Подробнее о них здесь
$(document).ready(function() {
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body1").html("Where did he go?!?!?!");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<div class="modal fade" id="myModal" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class='modal-body1'>
<h3>Close and open, I will be gone!</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Ответ 2
Что помогло мне, было положить следующую строку в готовую функцию:
$(document).ready(function()
{
..
...
// codes works on all bootstrap modal windows in application
$('.modal').on('hidden.bs.modal', function(e)
{
$(this).removeData();
}) ;
...
..
});
Когда модальное окно будет закрыто и открыто снова, предыдущие введенные и выбранные значения будут reset до начальных значений.
Я надеюсь, что это тоже поможет!
Ответ 3
Попробуйте клонирование, а затем удалите и повторно добавьте элемент, когда модаль скрыт. Это должно содержать все события, хотя я не полностью проверил это со всеми версиями всего.
var originalModal = $('#myModal').clone();
$(document).on('#myModal', 'hidden.bs.modal', function () {
$('#myModal').remove();
var myClone = originalModal.clone();
$('body').append(myClone);
});
Ответ 4
В reset все поля ввода в модальном режиме используют следующее.
$(".modal-body input").val("")
Ответ 5
Здесь альтернативное решение.
Если вы делаете много изменений в DOM (добавление/удаление элементов и классов), может быть несколько вещей, которые должны быть "reset". Вместо того, чтобы очищать каждый элемент при закрытии модала, вы можете reset весь модальный каждый раз, когда он снова открывается.
Пример кода:
(function(){
var template = null
$('.modal').on('show.bs.modal', function (event) {
if (template == null) {
template = $(this).html()
} else {
$(this).html(template)
}
// other initialization here, if you want to
})
})()
Вы все равно можете написать свое начальное состояние в HTML, не беспокоясь о том, что с ним произойдет позже. Вы можете написать свой код UI JS, не беспокоясь о необходимости его очистки позже. Каждый раз, когда модаль перезапускается, он будет reset до того же самого состояния, в котором он был в первый раз.
Edit: Здесь версия, которая должна обрабатывать несколько модалов (я ее не тестировал)...
(function(){
$('.modal').on('show.bs.modal', function (event) {
if (!$(this).data('template')) {
$(this).data('template', $(this).html())
} else {
$(this).html($this.data('template'))
}
// other initialization here, if you want to
})
})()
Ответ 6
вы можете попробовать это
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
Он удалит все данные из модели и reset.
Ответ 7
Я использую BS 3.3.7, и у меня есть проблема, когда я открываю модальный, а затем закрываю его, модальное содержимое остается на стороне клиента, а html ("") вообще не понятно. Поэтому я использовал это, чтобы полностью удалить код внутри модального div.
Ну, вы можете спросить, почему код с дополнением справа, в хром для окон, когда открывают модальный из другого модального кода и закрывают этот второй модальный вариант с правом на право на 17 пикселей.
Надеюсь, это поможет...
$(document)
.on('shown.bs.modal', '.modal', function () {
$(document.body).addClass('modal-open')
})
.on('hidden.bs.modal', '.modal', function () {
$(document.body).removeClass('modal-open')
$(document.body).css("padding-right", "0px");
$(this).removeData('bs.modal').find(".modal-dialog").empty();
})
Ответ 8
Пример кода:
$(document).on('hide.bs.modal', '#basicModal', function (e) {
$('#basicModal').empty();
});
Ответ 9
(function(){
$(".modal").on("hidden.bs.modal", function(){
$(this).removeData();
});
});
Это идеальное решение для удаления контакта при скрытии/закрытии бутстрапа.
