Вимкніть клацання за межами модальної області завантаження, щоб закрити модальний


440

Я роблю веб-сайт для завантаження, з парою Bootstrap 'Modals'. Я намагаюся налаштувати деякі функції за замовчуванням.

Проблема в цьому; Ви можете закрити модал, натиснувши на фон. Чи можливо деактивувати цю функцію? Тільки для мод specifc?

Модальна сторінка завантаження


скажіть, будь ласка, яка подія викликається в цій ситуації. $ звільнення У мене є реалізація для подання та переривання, але я не знаю події, спричиненої в цій ситуації.
LoveToCode

Відповіді:


912

У розділі «Параметри» на сторінці, яку ви пов’язали, ви можете побачити backdropпараметр. Передача цієї опції зі значенням 'static'не дозволить закрити модальний.
Як @PedroVagner вказував на коментарі, ви також можете пройти, {keyboard: false}щоб запобігти закриванню модального клавіша натисканням Esc.

Якщо ви відкриваєте модаль js, використовуйте:

$('#myModal').modal({backdrop: 'static', keyboard: false})  

Якщо ви використовуєте атрибути даних, використовуйте:

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`

чи є спосіб зберегти фон у змозі реєструвати кліки для інших елементів керування, але тільки не закривати модалі?
vivekanon

2
@mystikacid Вам слід задати нове запитання. Буде краще допомогти вам зі своєю проблемою та іншими користувачами, які шукають подібне рішення.
Doguita


3
Виникла проста, але дратує проблему, переконайтеся, що ви розміщуєте рядок jquery, перш ніж $('#modal').modal('show');Надія це допоможе!
cwiggo

3
cwiggo ви не використовуєте modal $ ('# modal'). modal ('show'); - ви просто використовуєте .modal ({backdrop: 'static', клавіатура: false}) - без жодної програми показу або перемикання
TV-C-15

135

Це найпростіший

Ви можете визначити модальну поведінку, визначаючи клавіатуру даних та фон даних.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">

2
Це єдине, що працювало на мене. Передача параметрів у JS безпосередньо мені чомусь не працювала (версія 3.3.7). Якщо хтось інший підтвердиться, я можу відкрити проблему з командою Bootstrap.
dchacke

Спочатку використання js версії теж не працювало для мене, оскільки я встановлював усе після відкриття модального режиму. Ви повинні зробити це "$ ('# modalForm'). Modal ({backdrop: 'static', клавіатура: false});" перед цим "$ ('# modalForm'). modal ('показати');". Але для мене найкраща відповідь - від @ ಅನಿಲ್
Лукас

Це працювало для мене. Встановлення data-backdrop="static"параметра на модальне визначення, а не кнопка тригера, яка відкриває модальний спосіб, як зазначено в інших відповідях, працювала для мене.
TSmith

99

Ви можете використовувати такий атрибут: data-backdrop="static"або з javascript:

$('#myModal').modal({
    backdrop: 'static',
    keyboard: false  // to prevent closing with Esc button (if you want this too)
})

Дивіться і цю відповідь: забороняйте закривати модальне вікно завантажувального завантаження


<div id = "modal" class = "модальне приховання зникає в" data-keyboard = "false" data-backdrop = "static"> це найкраща відповідь.
Kamlesh

34

У своїй програмі я використовую наведений нижче фрагмент коду, щоб показати модуль Bootstrap через jQuery.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                }); 

Це гарна відповідь, оскільки цей код буде працювати лише тоді, коли модальний режим відкритий.
Діпак Доліян

32

Можна використовувати

$.fn.modal.prototype.constructor.Constructor.DEFAULTS.backdrop = 'static';
$.fn.modal.prototype.constructor.Constructor.DEFAULTS.keyboard =  false;

щоб змінити поведінку за замовчуванням.


Прекрасна відповідь, оскільки він справляється з ситуацією для всіх модалів.
Харіс ур Рехман

1
У bootstrap v4 синтаксис є: $ .fn.modal.prototype.constructor.Constructor.Default.backdrop = 'статичний';
Гаррі Англійська

11

Є два способи відключити клацання поза зоною моделі завантажувального пристрою, щоб закрити модальний-

  1. за допомогою JavaScript

    $('#myModal').modal({
       backdrop: 'static',
       keyboard: false
    });
  2. використовуючи атрибут даних у тезі HTML

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.

9

Оформити замовлення ::

$(document).ready(function() {
    $("#popup").modal({
        show: false,
        backdrop: 'static'
    });
    
    $("#click-me").click(function() {
       $("#popup").modal("show");             
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
        </head>
    <body>
        <div class="modal" id="popup" style="display: none;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3>Standard Selectpickers</h3>
            </div>
            <div class="modal-body">
                
                <select class="selectpicker" data-container="body">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <a id="click-me" class="btn btn-primary">Click Me</a> 
    </body>
        <script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>


6

Ще один варіант, якщо ви не знаєте, модал уже відкритий чи ні, і вам потрібно налаштувати параметри модалу:

Завантаження 3.4

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal').options.keyboard = keyboard;
    $modal.data('bs.modal').options.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

Завантажувальний пристрій 4.3+

var $modal = $('#modal');
var keyboard = false; // Prevent to close by ESC
var backdrop = 'static'; // Prevent to close on click outside the modal

if(typeof $modal.data('bs.modal') === 'undefined') { // Modal did not open yet
    $modal.modal({
        keyboard: keyboard,
        backdrop: backdrop
    });
} else { // Modal has already been opened
    $modal.data('bs.modal')._config.keyboard = keyboard;
    $modal.data('bs.modal')._config.backdrop = backdrop;

    if(keyboard === false) { 
        $modal.off('keydown.dismiss.bs.modal'); // Disable ESC
    } else { // 
        $modal.data('bs.modal').escape(); // Resets ESC
    }
}

Змініть параметри на _config


для Bootstrap 4 + це має бути _setEscapeEvent()замість .escape()?
Іван Бахер

@IvanBacher працює для мене, використовуючи .escape ()
Кава

5

Для мене це рішення:

$('#myModal').modal({backdrop: 'static', keyboard: false})  

фон: вимкнено подію за кліком поза

клавіатура: відключена подія ключового слова scape


4
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

спробуйте це, під час розробки мого додатка ... Я також зіткнувся з проблемою, що значення за замовчуванням для атрибута моделі => data-keyboard="true", =>data-backdrop="non static"

Сподіваюся, це допоможе вам!



1

жодне з цих рішень не працювало на мене.

У мене є модальні умови, які я хотів змусити людей переглядати, перш ніж продовжувати ... за замовчуванням "статичні" та "клавіатурні" відповідно до варіантів унеможливлювало прокручування сторінки вниз, оскільки загальні положення та умови - кілька сторінок журнал, статика не була для мене відповіддю.

Тож замість цього я пішов від’єднати метод кліку на модалі, наступним чином я зміг отримати бажаний ефект.

$('.modal').off('click');



0
You can Disallow closing of #signUp (This should be the id of the modal) modal when clicking outside of modal.
As well as on ESC button.
jQuery('#signUp').on('shown.bs.modal', function() {
    jQuery(this).data('bs.modal').options.backdrop = 'static';// For outside click of modal.
    jQuery(this).data('bs.modal').options.keyboard = false;// For ESC button.
})

0

Якщо ви використовуєте @ ng-bootstrap, використовуйте наступне:

Компонент

import { Component, OnInit } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.scss'],
})
export class ExampleComponent implements OnInit {

  constructor(
    private ngbModal: NgbModal
  ) {}

  ngOnInit(): void {
  }

  openModal(exampleModal: any, $event: any) {
    this.ngbModal.open(exampleModal, {
      size: 'lg', // set modal size
      backdrop: 'static', // disable modal from closing on click outside
      keyboard: false, // disable modal closing by keyboard esc
    });
  }
}

Шаблон

<div (click)="openModal(exampleModal, $event)"> </div>
    <ng-template #exampleModal let-modal>
        <div class="modal-header">
            <h5 class="modal-title">Test modal</h5>
        </div>
        <div class="modal-body p-3">
            <form action="">
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="">Test field 1</label>
                        <input type="text" class="form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label for="">Test field 2</label>
                        <input type="text" class="form-control">
                    </div>

                    <div class="text-right pt-4">
                        <button type="button" class="btn btn-light" (click)="modal.dismiss('Close')">Close</button>
                        <button class="btn btn-primary ml-1">Save</button>
                    </div>
            </form>
        </div>
    </ng-template>

Цей код був протестований на кутовій 9, використовуючи:

  1. "@ ng-bootstrap / ng-bootstrap": "^ 6.1.0",

  2. "bootstrap": "^ 4.4.1",


0

Використовуйте це, якщо ви хочете відключити зовнішній клік для всіх модалів за допомогою jQuery. Додайте цей скрипт у свій Javascript після jQuery.

jQuery(document).ready(function () {
    jQuery('[data-toggle="modal"]').each(function () {
       jQuery(this).attr('data-backdrop','static');
       jQuery(this).attr('data-keyboard','false');
    });
});

-1

Ви також можете це зробити, не використовуючи JQuery, наприклад:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;

-2

Додайте нижче css відповідно до потрібної ширини екрана.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.