Q

Close Bootstrap Modal

2013-05-11 2 views 281 likes

281

У меня есть модальное диалоговое окно bootstrap, которое я хочу показать сначала, а затем, когда пользователь нажимает на страницу, он исчезает. У меня есть следующий:Close Bootstrap Modal

$(function() { 
    $('#modal').modal(toggle) 
}); 

<div class="modal" id='modal'> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Error:</h3> 
     </div> 
     <div class="modal-body"> 
     <p>Please correct the following errors:</p> 
     </div> 
    </div> 
</div>

Модальный отображаются на начальном этапе, но не закрывается при нажатии вне модального. Кроме того, область содержимого не выделена серым цветом. Как я могу сначала отобразить модальный дисплей, а затем закрыть после того, как пользователь нажимает за пределами области? И как я могу заставить фон быть серым, как в демо?

источник

2013-05-11 Nick B

+0

Вы инициализирует свой модальный с '$ ("# yourModal"). Модальным()' или '$ ('модальный.). Модальным()'? – merv

+0

Добавлен больше контекста выше. Спасибо за любые идеи @merv! –

+0

yep ... это показало проблему. @Tamil имеет ваше решение. – merv

A

ответ

452

Помещенный modal('toggle') вместо modal(toggle)

$(function() { 
    $('#modal').modal('toggle'); 
});

источник

2013-05-11 03:19:28

+3

Включение «переключателя» во все просто. Просто убедитесь, что у меня нет класса 'hide' в модальном div. Но да, опечатка вызывала проблему. так что +1 – merv

+13

Нет, он не работает должным образом, он скрывает модальный элемент, но элемент наложения фона все еще существует, вы должны использовать решение @Subodth. –

+0

@Pierre, Parik is правильно – usefulBee

275

закрыть самозагрузки modal вы можете передать 'скрыть' в качестве опции для модального метода, как следовать

$('#modal').modal('hide');

Пожалуйста, обратите внимание на рабочих fiddle here

bootstrap также предоставляет события, которые вы можете подключить к функциям modal, например, если вы хотите запустить событие, когда модальность закончила скрываться от пользователя, вы можете использовать hidden.bs.modal. Вы можете узнать больше о модальных методах и события здесь, в Documentation

Если ни один из вышеперечисленных методов не работает, введите идентификатор вашей кнопки закрытия и нажмите кнопку «Закрыть».

источник

2013-11-25 11:16:43

+4

$ ('# modal'). Modal ('toggle'); лучше скрывать модальную тень. –

+2

@ hamzeh.hanandeh, 'toggle' сохраняет наложение и не является решением. Вы всегда должны использовать 'show' или' hide'. – ryanpcmcquen

7

Мои пять центов на этом - это то, что я не хочу, чтобы таргетинг загрузочного модального на id и видя, что должен быть только один модальный за один раз, должно быть достаточно, чтобы удалить модальный переключение может быть опасно:

$('.modal').removeClass('show');

источник

2015-08-11 09:26:36

+2

Намерения хороши, но этот подход не всегда будет работать. Другие элементы страницы, в том числе '', добавляют к ним классы, которые также должны быть возвращены. Лучший ответ - использовать метод '' hide''. – JustinStolle

20

это работало для меня:

<span class="button" , data-dismiss="modal" aria-label="Close">cancel</span>

используют эту ссылку modal close

источник

2015-12-12 12:15:11 santhosh

41

$('#modal').modal('toggle');

или

$('#modal').modal().hide();

должен работать.

Но если ничего не работает, Вы можете вызвать кнопку закрытия модальной непосредственно:

$("#modal .close").click()

источник

2016-06-09 12:04:50

+7

тот, у кого есть hide(), закрывает модальный, но оставляет фон размытым. $ ("# modal .close"). click() делает это отлично. Спасибо! – Shilpa

+5

Ваш последний вариант работал для меня. Благодарю. –

+4

Это явно задокументировано, здесь нет необходимости подделывать щелчок, который кажется довольно шумным. Правильный ответ: $ ('# modal'). Modal ('hide'); –

3

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script> 
 
$(window).load(function(){ 
 
     $('#myModal').modal('show'); 
 
}); 
 
$(function() { 
 
    $('#modal').modal('toggle'); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Modal Example</h2> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal Header</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Some text in the modal.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
</div> 
 

 
</body> 
 
</html>

источник

2016-07-20 09:54:24

+0

Ошибка: «message»: «Uncaught TypeError: $ (...). Modal не является функцией« –

+0

у вас есть эта ошибка? –

+0

Да. У меня есть ошибка, если «Выполнить фрагмент кода» в Chrome (Linux Mint). Но он работает в Firefox. –

5

В некоторых случаях орфографических ошибок может быть виновником.Например, убедитесь, что у вас есть:

data-dismiss="modal"

и не

data-dissmiss="modal"

Обратите внимание на двойные «сс» во втором примере, который заставит кнопку Закрыть, завершившуюся неудачу.

источник

2016-08-13 09:48:00 zinczinc

13

$("#your-modal-id").modal('hide');

Выполнение этого вызова по классу ($(".my-modal")) не будет работать.

источник

2016-12-05 10:22:26

0

Кроме того, вы можете «щелкнуть» по «x», который закрывает диалог. т.д .:

$(".ui-dialog-titlebar-close").click();

источник

2017-01-10 21:10:39 slashka

1

Использование modal.hide бы только скрыть модальность. Если вы используете оверлей под модальным, он все равно будет там. используйте щелчок, чтобы фактически закрыть модальный и удалить оверлей.

$("#modalID .close").click()

источник

2017-02-22 22:39:43

+0

это правильно 1 –

5

это один довольно хорошо, и он также работает в угловом 2

$("#modal .close").click()

источник

2017-03-01 05:58:56 user3869304

+1

это правильно .... –

+0

Работает для меня вместо '' '$ ('# modal'). Modal ('toggle');' '', который не имеет никакого эффекта. – TodStoychev

1

$('.modal.in').modal('hide');

использовать код выше, чтобы скрыть фон модальных, если вы используете несколько модальные попы в одном стр.

источник

2017-05-16 16:41:18

0

Другой способ сделать это - сначала удалить класс modal-open, который закрывает модальный. Затем вы удаляете класс модальный фон, который удаляет сероватую обложку модального.

После код могут быть использованы:

$('body').removeClass('modal-open') 
$('.modal-backdrop').remove()

источник

2017-05-30 15:26:05 Orozcorp

+0

Пожалуйста, старайтесь избегать просто сдачи кода в качестве ответа и попытайтесь объяснить, что он делает и почему. Ваш код может быть не очевидным для людей, у которых нет соответствующего опыта в кодировании. Пожалуйста, отредактируйте свой ответ, чтобы включить [пояснение, контекст и попытаться упомянуть о любых ограничениях, допущениях или упрощениях в вашем ответе.] (Https://stackoverflow.com/help/how-to-answer) – Frits

+0

Итак, в основном, что это делает удаляет класс modal-open, который закрывает модальный. затем удаляет класс модальный фон, который удаляет сероватую обложку модального – Orozcorp

4

Мы можем закрыть модальное всплывающее окно следующих способов:

// We use data-dismiss property of modal-up in html to close the modal-up,such as 

<div class='modal-footer'><button type='button' class="btn btn-default" data-dismiss='modal'>Close</button></div> 

// We can close the modal pop-up through java script, such as 

<div class='modal fade pageModal' id='openModal' tabindex='-1' data-keyboard='false' data-backdrop='static'> 

    $('#openModal').modal('hide'); //Using modal pop-up Id. 
    $('.pageModal').modal('hide'); //Using class that is defined in modal html.

источник

2017-06-05 08:19:04

0

Это работает для меня, я использую угловые- на мой диалогКомпоненты

export class dialogComponents{ 
 
    constructor(public bsModalRef: BsModalRef, private modalService: BsModalService) { } 
 

 
    config = { 
 
     animated: true, 
 
     keyboard: true, 
 
     backdrop: false, 
 
     ignoreBackdropClick: true 
 
    }; 
 

 
    openClientModal() { 
 
     this.bsModalRef.hide(); 
 
      this.bsModalRef = this.modalService.show(survey, this.config); 
 
         
 
    } 
 
     decline() { 
 
      console.log('user logout!'); 
 
      this.bsModalRef.hide(); 
 
     } 
 
    }

источник

2018-02-14 03:40:46 GoodJeans

Смежные вопросы