Vô hiệu hóa nhấp bên ngoài khu vực phương thức bootstrap để đóng phương thức

440

Tôi đang tạo một trang web bootstrap, với một vài Bootstrap 'Modals'. Tôi đang cố gắng tùy chỉnh một số tính năng mặc định.

Vấn đề là cái này; Bạn có thể đóng phương thức bằng cách nhấp vào nền. Có cách nào để vô hiệu hóa tính năng này? Trên phương thức specifc chỉ?

Trang phương thức Bootstrap

javascript  css  twitter-bootstrap  modal-dialog 
— Ví dụ
nguồn
bạn có thể vui lòng cho tôi biết sự kiện nào được gọi trong tình huống này. $ scope.ok, $ scope. $ bỏ qua tôi đã thực hiện để gửi và hủy bỏ nhưng tôi không biết sự kiện bị sa thải trong tình huống này.
— LoveToCode
4
— tm

Câu trả lời:

911

Trên chương Tùy chọn, trong trang bạn đã liên kết, bạn có thể thấy backdroptùy chọn. Vượt qua tùy chọn này với giá trị 'static'sẽ ngăn việc đóng phương thức.
Khi @PedroVagner chỉ vào các bình luận, bạn cũng có thể vượt qua {keyboard: false}để ngăn việc đóng chế độ bằng cách nhấn Esc.

Nếu bạn mở phương thức của js, hãy sử dụng: 

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

Nếu bạn đang sử dụng thuộc tính dữ liệu, hãy sử dụng: 

 <button data-target="#myModal" data-toggle="modal" data-backdrop="static" data-keyboard="false">
    Launch demo modal
 </button>`
— Doguita
nguồn
Có cách nào để giữ cho nền có thể đăng ký các nhấp chuột cho các điều khiển khác nhưng không đóng các chế độ không?
— vivekanon
2
@mystikacid Bạn nên đặt một câu hỏi mới cho điều đó. Sẽ tốt hơn để giúp bạn với vấn đề của bạn và những người dùng khác đang tìm kiếm một giải pháp tương tự.
— Doguita
— vivekanon
3
Có một vấn đề đơn giản nhưng gây khó chịu, hãy chắc chắn rằng bạn đặt dòng jquery trước khi $('#modal').modal('show');Hope điều này có ích!
— cwiggo
3
cwiggo bạn không sử dụng phương thức $ ('# phương thức'). phương thức ('hiển thị'); - bạn chỉ cần sử dụng .modal ({backdrop: 'static', bàn phím: false}) - không có bất kỳ lệnh hiển thị hoặc chuyển đổi nào
— TV-C-15
135

Đây là cái dễ nhất

Bạn có thể xác định hành vi phương thức của mình, xác định bàn phím dữ liệu và phông nền dữ liệu.

<div id="modal" class="modal hide fade in" data-keyboard="false" data-backdrop="static">
— Sushan
nguồn
2
Đây là điều duy nhất làm việc cho tôi. Chuyển qua các tùy chọn trong JS trực tiếp chỉ không hoạt động đối với tôi vì một số lý do (phiên bản 3.3.7). Nếu bất cứ ai khác chứng thực, tôi có thể mở một vấn đề với nhóm Bootstrap.
— dchacke
Lúc đầu, sử dụng phiên bản js cũng không hiệu quả với tôi vì tôi đã thiết lập mọi thứ sau khi tôi mở chế độ. Bạn nên làm điều này "$ ('# modalForm'). Modal ({backdrop: 'static', keyboard: false});" trước "$ ('# modalForm'). modal ('show');". Nhưng đối với tôi, câu trả lời tốt nhất là từ @
— Lucas
Điều này làm việc cho tôi. Đặt data-backdrop="static"tùy chọn trên định nghĩa phương thức, không phải nút kích hoạt mở chế độ như được chỉ định trong các câu trả lời khác, đã làm việc cho tôi.
— TSmith
99

Bạn có thể sử dụng một thuộc tính như thế này: data-backdrop="static"hoặc với javascript: 

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

Xem câu trả lời này quá: Không cho phép cửa sổ mô đun bootstrap twitter đóng

— Antonis Grigoriadis
nguồn
<div id = "modal" class = "modal hidden fade in" data-keyboard = "false" data-backdrop = "static"> đây là câu trả lời tốt nhất.
— Kam Meat
34

Trong ứng dụng của mình, tôi đang sử dụng đoạn mã dưới đây để hiển thị phương thức Bootstrap thông qua jQuery.

 $('#myModall').modal({
                        backdrop: 'static',
                        keyboard: true, 
                        show: true
                });
— ಅನಿಲ್
nguồn
Đây là câu trả lời tốt vì mã này sẽ chỉ hoạt động khi phương thức được mở.
— Deepak Dholiyan
32

Bạn có thể dùng

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

để thay đổi hành vi mặc định.

— David Navarro Astudillo
nguồn
Câu trả lời tuyệt vời, vì nó xử lý tình huống cho tất cả các phương thức.
— Haris ur Rehman
1
Trong bootstrap v4, cú pháp là: $ .fn.modal.prototype.constructor.Constructor.Default.backdrop = 'static';
— Garry Tiếng Anh
11

Có hai cách để vô hiệu hóa nhấp bên ngoài khu vực mô hình bootstrap để đóng chế độ-

  1. sử dụng javascript

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

  2. sử dụng thuộc tính dữ liệu trong thẻ HTML

    data-backdrop="static" data-keyboard="false" //write this attributes in that button where you click to open the modal popup.
— Bò tót Tripaur
nguồn
9

Kiểm tra này ::

$(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>
Mở rộng đoạn trích

— Sachin SanchLocation
nguồn
6

Một tùy chọn khác nếu bạn không biết liệu phương thức đã được mở hay chưa và bạn cần định cấu hình các tùy chọn phương thức:

Bootstrap 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
    }
}

Bootstrap 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
    }
}

Thay đổi tùy chọn thành _config

— Cava
nguồn
cho Bootstrap 4 + nên _setEscapeEvent()thay thế .escape()?
— Ivan Bacher
@IvanBacher Hoạt động với tôi bằng cách sử dụng .escape ()
— Cava
5

Giải pháp phù hợp với tôi là như sau: 

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

backdrop: vô hiệu hóa nhấp chuột bên ngoài sự kiện

bàn phím: vô hiệu hóa sự kiện từ khóa scape

— Jorge Santos Neill
nguồn
4 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">

Hãy thử điều này, Trong quá trình phát triển ứng dụng của tôi ... Tôi cũng gặp phải rắc rối là các giá trị mặc định cho thuộc tính mô hình => data-keyboard="true", =>data-backdrop="non static"

Hy vọng điều này sẽ giúp bạn!

— Deepalakshmi
nguồn
3

Thử cái này:

<div
  class="modal fade"
  id="customer_bill_gen"
  data-keyboard="false"
  data-backdrop="static"
>
— Vijay Chauhan
nguồn
Điều này làm việc cho tôi cảm ơn .....
— Ajay Kumar
1

không có giải pháp nào trong số này làm việc cho tôi

Tôi có một điều khoản và điều kiện phương thức mà tôi muốn buộc mọi người xem xét trước khi tiếp tục ... mặc định "tĩnh" và "bàn phím" theo các tùy chọn khiến cho không thể cuộn xuống trang vì các điều khoản và điều kiện là một vài trang đăng nhập, tĩnh không phải là câu trả lời cho tôi.

Vì vậy, thay vào đó tôi đã hủy bỏ phương thức nhấp chuột trên phương thức, với điều sau đây tôi đã có thể có được hiệu quả mong muốn.

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

— RGB
nguồn
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.
})
— sonu pokade
nguồn
0

Nếu bạn đang sử dụng @ ng-bootstrap, hãy sử dụng như sau:

Thành phần

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
    });
  }
}

Bản mẫu

<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>

Mã này đã được thử nghiệm trên góc 9 bằng cách sử dụng:

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

  2. "bootstrap": "^ 4.4.1",

— Hamfri
nguồn
0

Sử dụng điều này nếu bạn muốn vô hiệu hóa nhấp chuột bên ngoài cho tất cả các phương thức sử dụng jQuery. Thêm tập lệnh này vào Javascript của bạn sau jQuery.

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

Bạn cũng có thể làm điều này mà không cần sử dụng JQuery, như vậy:

<div id="myModal">

var modal = document.getElementById('myModal');
modal.backdrop = "static";
modal.keyboard = false;
— Sirar Salih
nguồn
-2

Thêm css dưới đây theo bạn muốn chiều rộng màn hình của bạn.

@media (min-width: 991px){
    .modal-dialog {
        margin: 0px 179px !important;
    }
}
— Atul
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.