Làm cách nào để mở cửa sổ phương thức Bootstrap bằng jQuery?

769

Tôi đang sử dụng chức năng cửa sổ phương thức Twitter Bootstrap. Khi ai đó nhấp vào gửi trên biểu mẫu của tôi, tôi muốn hiển thị cửa sổ phương thức khi nhấp vào "nút gửi" trong biểu mẫu.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </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>

jQuery:

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});
javascript  jquery  twitter-bootstrap 
— người dùng244394
nguồn
Bạn có một lỗi đánh máy trong tùy chọn hiển thị của bạn. Nó cần một boolean, vì vậy đừng đặt dấu ngoặc kép quanh 'false' - $ ('# my-modal'). Modal ({show: false});
— Darren Parker

Câu trả lời:

1413

Bootstrap có một vài chức năng có thể được gọi thủ công trên các phương thức:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

Bạn có thể xem thêm ở đây: Thành phần phương thức Bootstrap

Cụ thể là phần phương pháp .

Vì vậy, bạn sẽ cần phải thay đổi:

$('#my-modal').modal({
    show: 'false'
});

đến:

$('#myModal').modal('show');

Nếu bạn đang tìm cách tạo một cửa sổ bật lên tùy chỉnh của riêng mình, thì đây là video được đề xuất từ ​​một thành viên cộng đồng khác:

https://www.youtube.com/watch?v=zK4nXa84Km4

— săn bắt
nguồn
5
Tôi không chắc tại sao điều này không hoạt động trong trường hợp của tôi. Tôi có cùng mã demo trong trang của mình và tôi đã mã hóa nút gửi như trên. Tuy nhiên, khi tôi nhấp vào gửi, cửa sổ phương thức sẽ nhấp nháy nhanh và biến mất. Tôi phải nhấp vào nút 'quay lại' của trình duyệt để trả lại trang.
— Chris22
6
Tôi tìm thấy anwser ở đây để bình luận của tôi ở trên. Liên kết trùng lặp đến bootrap.js trên trang của trang.
— Chris22
1
Uncaught TypeError: $ (...). Modal không phải là một hàm, Đây có lẽ là tôi nhưng có ý tưởng nào khiến tôi gặp lỗi này không? (tôi có jQuery)
— Vladimir tuyên bố
4
Tôi phát hiện ra vấn đề của mình, tôi đã thực hiện một cuộc gọi ajax đến một phù thủy tập tin bao gồm Jquery. Nếu jQuery được bao gồm 2 lần thì nó không hoạt động!
— Vladimir tuyên bố
2
Tôi đã thử .modal('show')nhưng trong trình duyệt google chrome thì nó không hoạt động
— Durga
89

Ngoài ra, bạn có thể sử dụng thông qua thuộc tính dữ liệu

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Trong trường hợp cụ thể này, bạn không cần phải viết javascript.

Bạn có thể xem thêm tại đây: http://getbootstrap.com/2.3.2/javascript.html#modals

— Gandarez
nguồn
4
Để làm rõ: "không cần sử dụng javascript" có nghĩa là "không cần viết javascript", javascript vẫn đang được sử dụng. Tôi đã cố chỉnh sửa câu trả lời nhưng nó đã bị từ chối vì nó không "chính xác hơn". Nếu bạn thử mã ở trên với javascript bị vô hiệu hóa, nó sẽ không hoạt động. Điều đó có nghĩa là bạn sử dụng javascript cho tôi.
— npretto
83

Thông thường, khi $('#myModal').modal('show');không hoạt động, nguyên nhân là do đã bao gồm jQuery hai lần. Bao gồm jQuery 2 lần làm cho các phương thức không hoạt động.

Xóa một trong các liên kết để làm cho nó hoạt động trở lại.

Hơn nữa, một số plugin cũng gây ra lỗi, trong trường hợp này thêm 

jQuery.noConflict(); 
$('#myModal').modal('show');
— Vladimir tuyên bố
nguồn
3
DataTables với phiên bản jQuery được đóng gói sẵn đã gây ra điều này cho tôi
— Wesley Smith
2
Cảm ơn rât nhiều. Tôi đang có cùng một vấn đề: phương thức không phải là một chức năng. Nhưng sau khi thêm jQuery.noConflict (), nó hoạt động.
— Người làm việc Ahmmed
1
Cần lưu ý rằng cách giải quyết này chỉ nên được sử dụng nếu bạn không thể giải quyết nguyên nhân gốc (nghĩa là chỉ bao gồm jQuery một lần). Nếu một số plugin của bên thứ ba bao gồm nó, hãy tìm phiên bản không bao gồm hoặc liên hệ với bên thứ ba để tạo một plugin.
— rybo111
19

Chỉ cần gọi phương thức phương thức (không truyền bất kỳ tham số nào) bằng cách sử dụng jQuerybộ chọn.

Đây là ví dụ:

$('#modal').modal();
— Cám
nguồn
1
Làm thế nào để tôi chuyển nhiều tham số hơn cho phương thức của tôi? Ví dụ: một ID cụ thể (động)?
— Pathros
1
Làm thế nào để bạn làm cho ID của bạn được năng động? Bạn có làm nó bằng ID không? nếu có, bạn có thể sử dụng chức năng $ (this) từ jQuery để chọn đối tượng hiện tại và truyền tham số cho anh ta.
— Brane
13

Nếu bạn sử dụng chức năng onclick của liên kết để gọi một phương thức bằng jQuery, "href" không thể là null.

Ví dụ:

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

Phương thức không thể hiển thị. Mã đúng là:

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
— vệ sinh
nguồn
12

Dưới đây là cách tải cảnh báo bootstrap ngay khi tài liệu sẵn sàng. Nó rất dễ dàng chỉ cần thêm

 $(document).ready(function(){
   $("#myModal").modal();
});

Tôi đã làm một bản demo trên W3Schools.

<!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/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
  <!-- Trigger the modal with a 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>

<script>
$(document).ready(function(){
   $("#myModal").modal();
});
</script>

</body>
</html>
Mở rộng đoạn trích

— csandreas1
nguồn
10

Kiểm tra các giải pháp hoàn chỉnh ở đây:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_Vf_js_modal_show&stacked=h

Đảm bảo đặt các thư viện theo yêu cầu để có kết quả:

1- Bootstrap.min.css đầu tiên 2- jquery.min.js 3- bootstrap.min.js

(Nói cách khác, jquery.min.js phải được gọi trước khi bootstrap.min.js)

    <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/3.1.1/jquery.min.js">
</script> 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
— A.Aleem11
nguồn
7

Tôi đã thử một vài phương pháp thất bại, nhưng cách dưới đây có hiệu quả đối với tôi như một cơ duyên:

$('#myModal').appendTo("body").modal('show');
— thông thường
nguồn
2
Tương tự! Đây là giải pháp duy nhất làm việc cho tôi là tốt.
— pengz
Bạn có chắc là nó không muốn .appendTo("modal-body")?
— James A Mohler
@novembersky, bạn cần đặt mã bên trong sự kiện nhấp hoặc khi tải trang bằng jquery: $ (document). yet (function () {$ ("# myModal"). modal ();});
— Abhijit Kumar
7

Hãy thử sử dụng jQuery thay vì dấu $ khi gọi hàm, nó hoạt động trong trường hợp của tôi như bạn có thể thấy bên dưới.

jQuery.noConflict(); 
jQuery('#myModal').modal('show');

jQuery.noConflict (); bởi vì khi jQuery ('# myModal'). modal ('show'); không hoạt động, đó là do đã bao gồm jQuery hai lần. Bao gồm jQuery 2 lần làm cho các phương thức không hoạt động. và nó sẽ giải quyết vấn đề trong trường hợp đó, như trong trường hợp của tôi, nó đang lặp lại.

Hơn nữa bạn có thể đi đến liên kết này

Cửa sổ mô hình Bootstrap không hiển thị bằng cách gọi qua JQuery

— IB
nguồn
4

Thử

$("#myModal").modal("toggle")

Để mở hoặc đóng phương thức với id myModal.

Nếu ở trên không hoạt động thì có nghĩa là bootstrap.js đã bị ghi đè bởi một số tệp js khác. Đây là một giải pháp

1: - Di chuyển bootstrap.js xuống dưới cùng để nó sẽ ghi đè các tệp js khác.

2: - Hãy chắc chắn rằng thứ tự như dưới đây

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
— Nikhil Mohadikar
nguồn
4 
<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </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>

Bạn có thể khởi chạy phương thức với mã bên dưới này.

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});
— Alperzkn
nguồn
1

Thử cái này

myModal1 là id của phương thức

$('#myModal1').modal({ show: true });
— vivek
nguồn
0 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
— Sahnosh Rahguzar
nguồn
3
Khi trả lời các câu hỏi đã có câu trả lời, hãy cố gắng mở rộng các câu trả lời hiện có. Ngoài ra, nói chung nên bao gồm một lời giải thích về cách mã của bạn trả lời câu hỏi.
— Chris Camaratta
0

Bootstrap 4.3 - thêm tại đây

Hiển thị đoạn mã

— Kamil Kiełczewski
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.