Phương thức Bootstrap biến mất ngay lập tức

Tôi đang làm việc trên một trang web bằng bootstrap.

Về cơ bản, tôi muốn sử dụng một phương thức trong trang chủ, được triệu tập bằng nút trong Đơn vị anh hùng.

Mã nút:

<button type="button" 
    class="btn btn-warning btn-large" 
    data-toggle="modal"
    data-target="#myModal">Open Modal</button>

Mã phương thức:

<div class="modal hide fade" id="myModal" 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">In Costruzione</h3>
  </div>
  <div class="modal-body">
    <p>Test Modal: Bootstrap</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Chiudi</button>
    <button class="btn btn-warning">Salva</button>
  </div>
</div>

Vấn đề là ngay khi tôi nhấp vào nút, phương thức sẽ biến mất và ngay lập tức biến mất.

Tôi đánh giá cao sự giúp đỡ.

Ngoài ra, làm thế nào để thay đổi màu của tam giác thả xuống (chỉ lên, không di chuột)? Tôi đang làm việc trên một trang web dựa trên màu cam và nâu và điều đó màu xanh thực sự gây phiền nhiễu.

Nguyên nhân có thể

Đây là hành vi điển hình khi JavaScript cho plugin Modal được tải hai lần. Vui lòng kiểm tra để đảm bảo rằng plugin không được tải gấp đôi. Tùy thuộc vào nền tảng bạn đang sử dụng, mã phương thức có thể được tải từ một số nguồn. Một số trong những phổ biến là:

• bootstrap.js (bộ đầy đủ BootStrap JS)
• bootstrap.min.js (giống như trên, chỉ cần rút gọn)
• bootstrap-modal.js (plugin độc lập)
• một trình tải phụ thuộc, ví dụ, require('bootstrap')

Mẹo gỡ lỗi

Một nơi tốt để bắt đầu là kiểm tra clickngười nghe sự kiện đã đăng ký bằng cách sử dụng các công cụ dành cho nhà phát triển trong trình duyệt của bạn. Chẳng hạn, Chrome sẽ liệt kê tệp nguồn JS nơi có thể tìm thấy mã để đăng ký người nghe. Một tùy chọn khác là thử tìm kiếm các nguồn trên trang để tìm cụm từ được tìm thấy trong mã Modal, ví dụ : var Modal.

Thật không may, những điều này sẽ không luôn luôn tìm thấy mọi thứ trong mọi trường hợp. Kiểm tra các yêu cầu mạng có thể mạnh mẽ hơn một chút trong việc cung cấp cho bạn hình ảnh của tất cả mọi thứ được tải trên một trang.

Một bản demo (bị hỏng)

Đây là bản demo về những gì xảy ra khi bạn tải cả bootstrap.js và bootstrap-modal.js (chỉ để xác nhận trải nghiệm của bạn):

Plunker

Nếu bạn cuộn xuống dưới cùng của nguồn trên trang đó, bạn có thể xóa hoặc nhận xét <script>dòng cho bootstrap-modal.js và sau đó xác minh rằng bây giờ phương thức sẽ hoạt động như mong đợi.

Tôi đã có cùng một vấn đề nhưng nó có một nguyên nhân khác nhau. Tôi đã làm theo tài liệu và tạo một nút như vậy:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

Khi tôi nhấp vào nó, có vẻ như sẽ không có gì xảy ra. Tuy nhiên, nút <form>này tạm thời chỉ tìm nạp cùng một trang.

Tôi đã sửa lỗi này bằng cách thêm type="button"vào phần tử nút, để nó không gửi biểu mẫu khi nhấp vào.

Đối với tôi những gì đã làm việc là để loại bỏ

data-toggle="modal"

từ nút. Bản thân nút có thể là bất kỳ yếu tố nào - một liên kết, div, nút, v.v.

Tôi đã tìm một lúc để tham khảo bootstrap trùng lặp trong ứng dụng mvc của mình, sau những câu trả lời hữu ích khác cho câu hỏi này.

Cuối cùng cũng tìm thấy nó - nó được bao gồm trong một thư viện khác mà tôi đang sử dụng, vì vậy không rõ ràng chút nào! ( datatables.net).

Nếu bạn vẫn gặp phải vấn đề này, hãy tìm các thư viện khác có thể bao gồm bootstrap cho bạn. ( datatables.netcho phép bạn chỉ định tải xuống có hoặc không có bootstrap - những người khác cũng làm như vậy).

Vì vậy, tôi loại bỏ bootstrap.min.jskhỏi tôi bundle.configvà tất cả đều hoạt động tốt.

Cùng một triệu chứng, trong bối cảnh ứng dụng Rails với Bootstrap được cung cấp bởi bootstrap-sassđá quý và câu trả lời của @ merv đưa tôi đi đúng hướng.

application.jsTập tin của tôi có như sau:

//= require bootstrap
//= require bootstrap-sprockets

Cách khắc phục là xóa một trong hai dòng. Thật vậy, readme của gem cảnh báo bạn về lỗi này. Lỗi của tôi.

Mã của tôi bằng cách nào đó có bootstrap.min.js bao gồm hai lần. Tôi đã loại bỏ một trong số chúng và mọi thứ đều hoạt động tốt.

e.preventDefault(); với jquery ui

Đối với tôi, sự cố này xảy ra với phương thức nhấp chuột ghi đè trên nút jquery ui, khiến trang tải lại khi nhấp theo mặc định.

Vấn đề cũng có thể xảy ra nếu sử dụng jquery bạn đính kèm một trình nghe sự kiện hai lần. Ví dụ, bạn sẽ thiết lập mà không ràng buộc:

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal('toggle')
            })

Nếu điều này xảy ra, sự kiện được bắn hai lần liên tiếp và phương thức biến mất.

            $("body").on("click","#fixerror",function(event){
                $("#fixerrormodal").modal()
                $("#fixerrormodal").modal('toggle')
            })

Xem ví dụ: http://embed.plnkr.co/i5xB1WbX7zgXrbDMhNAW/preview

Tôi gặp phải triệu chứng tương tự mà @gpasse đã thể hiện trong ví dụ của anh ấy. Đây là mã của tôi ...

<form...>
  <!-- various inputs with form submit --->

  <!-- button opens modal to show dynamic info -->
  <button id="myButton" class="btn btn-primary">Show Modal</button>
</form>

<div id="myModal" class="modal fade" ...>
</div>

<script>
  $( '#myButton' ).click( function() {
    $( '#myModal' ).modal();
  )};
</script>

Như @Bhargav đã đề xuất, vấn đề của tôi là do nút cố gắng gửi biểu mẫu và tải lại trang. Tôi đã thay đổi nút thành một <a>liên kết như sau:

<a href="#" id="myButton" class="btn btn-primary">Show Modal</a>

... Và nó đã khắc phục vấn đề.

LƯU Ý: Tôi chưa có đủ danh tiếng để chỉ cần thêm nhận xét hoặc upvote và tôi cảm thấy rằng tôi có thể thêm một chút làm rõ.

Tôi cũng có vấn đề tương tự, nhưng đối với tôi nó đã xảy ra bởi vì tôi có một nút có loại "gửi" trong mẫu phương thức. tôi đã thay đổi

    <input  type='submit' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

đến

    <input  type='button' name='submitname' id="partyBtn" value='Submit' title='Click to submit.'/>

Và điều đó đã khắc phục vấn đề biến mất.

Trong trường hợp của tôi, tôi chỉ có một tệp bootstrap.js, jquery.js được bao gồm nhưng vẫn gặp loại lỗi như vậy và mã cho nút của tôi là như thế này:

<script type="text/javascript">
$(document).ready(function(){
   $("#bttn_<?php echo $rnt['id'];?>").click(function(){
      $("#myModal_<?php echo $rnt['id'];?>").modal('show');
   });
});
</script>

Tôi đơn giản thêm e.preventDefault (); với nó và nó làm việc như quyến rũ.

Vì vậy, mã mới của tôi là như dưới đây:

<script type="text/javascript">
$(document).ready(function(){
  e.preventDefault();
  $("#bttn_<?php echo $rnt['id'];?>").click(function(){
     $("#myModal_<?php echo $rnt['id'];?>").modal('show');
  });
});
</script>

Tôi đã gặp vấn đề này bản thân mình ngày hôm nay và nó chỉ xảy ra trong Chrome. Điều khiến tôi nhận ra nó có thể là một vấn đề kết xuất. Di chuyển phương thức cụ thể sang lớp kết xuất của chính nó đã giải quyết nó.

#myModal {
  -webkit-transform: translate3d(0, 0, 0);
}

Trong trường hợp của tôi, nhấp chuột vào nút gây ra tải lại (không muốn) của trang.

Đây là cách khắc phục của tôi:

<button class="btn btn-success" onclick="javascript: return false;" 
data-target="#modalID" data-toggle="modal">deaktivieren</button>

Trong trường hợp của tôi, tôi đã sử dụng actionlink nút trong MVC và tôi đã gặp phải vấn đề này, tôi đã thử nhiều giải pháp ở trên và khác, nhưng vẫn gặp phải vấn đề đó, sau đó tôi nhận ra lỗi của mình trong mã.

Tôi đã gọi phương thức trong javascript bằng cách sử dụng

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

Trước lỗi tôi sử dụng nút này

<a href="" onclick="return Edit();" class="btn btn-primary">Edit</a>

Tôi không có giá trị for href thuộc tính trong nút này vì vậy tôi phải đối mặt với vấn đề này.

Sau đó, tôi chỉnh sửa mã nút này như thế này

 <a href="#" onclick="return Edit();" class="btn btn-primary">Edit</a>

sau đó vấn đề được giải quyết chỉ là một lỗi vì không có # trong lần đầu tiên.

xem nếu điều này sẽ hữu ích cho bạn.

Một nguyên nhân / giải pháp khác! Tôi đã có trong mã JS của mình:

$("#show_survey").click(function() {
  $("#survey_modal").modal("show")
})

Nhưng mã HTML của tôi đã được viết là:

<a class="small-text link" data-target="#survey_modal" data-toggle="modal" href="#" id="show_survey">Take a quick 7 question survey!</a>

Vì vậy, đây là một hoán vị khác về cách sao chép đã nhập mã và khiến phương thức mở sau đó đóng. Trong trường hợp của tôi data-targetvà data-toggletrong html theo tài liệu Bootstrap đã kích hoạt phương thức hoạt động. Do đó, mã JS là dự phòng và khi được gỡ bỏ, nó hoạt động.

Tôi đã có cùng một vấn đề khi làm việc trên một dự án với asp.NET. Tôi đã sử dụng bootstrap 3.1.0 đã giải quyết việc hạ cấp xuống Bootstrap 2.3.2.

Tôi cũng có vấn đề, nếu nút nằm trong sau đó phương thức xuất hiện một lần và biến mất sớm, lấy nút ra khỏi biểu mẫu đã sửa lỗi isue. Cảm ơn tôi đã kết thúc trong chủ đề này! +1 cho tất cả.

Tôi đã phải đối mặt với cùng một vấn đề trong quá trình thử nghiệm trên thiết bị di động và thủ thuật này hiệu quả với tôi

<a type="submit" class="btn btn-primary" data-toggle="modal" href="#myModal">Submit</a> 

Thay đổi nút thành thẻ neo nên nó hoạt động, sự cố xảy ra do nút loại của nó vì nó đang cố gửi nên phương thức biến mất ngay lập tức. Và cũng xóa ẩn khỏi chế độ ẩn mờ dần cho <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> Hope điều này sẽ hiệu quả với bạn.

Trong trường hợp của tôi, tôi đã có CDN trong phần đầu của application.html.erb và cũng đã cài đặt đá quý 'jquery-rails', mà tôi đoán là nhờ tài liệu và bài đăng ở trên, là không cần thiết.

Tôi chỉ đơn giản nhận xét CDN (bên dưới) từ phần đầu của application.html.erb và phương thức thích hợp vẫn mở.

<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>-->

Tôi cũng có vấn đề tương tự. Vấn đề với tôi là tôi đã hiển thị phương thức khi nhấn một liên kết và nhắc xác nhận với jquery.

Mã dưới đây hiển thị phương thức và biến mất ngay lập tức:

<a href="" onclick="do_some_stuff()">Hey</a>

Cuối cùng tôi đã thêm '#' to href để liên kết không đi đến đâu và nó đã giải quyết được vấn đề của tôi.

<a href="#" onclick="do_some_stuff()">Hey</a>

Bạn đã thử loại bỏ

data-dismiss="modal"

Tôi biết cái này đã cũ, nhưng đây là một thứ khác để kiểm tra - đảm bảo bạn chỉ có một thuộc tính data-target =. Tôi đã sao chép nó và kết quả là theo chủ đề này.

Tôi đã thêm vào bootstrapdự án của mình thông qua bower, sau đó tôi nhập bootstrap.min.jstệp và sau modal.jstệp. (Nút mở chế độ nằm trong một biểu mẫu). Tôi chỉ cần loại bỏ nhập khẩu modal.jsvà nó hoạt động cho tôi.

trong trường hợp bất cứ ai sử dụng codeigniter 3 bootstrap có thể truy cập được.

Dưới đây là sửa lỗi của tôi trong config / ci_boostrap.php

//'assets/dist/frontend/lib.min.js',
//lib.min.js has conflict with datatables.js and i removed it replace with jquery.js
'assets/dist/frontend/jquery-3.3.1.min.js',
'assets/dist/frontend/app.min.js',
'assets/dist/datatables.js'

Phải đối mặt với cùng một vấn đề. Lý do là giống như @merv. Vấn đề là với một thành phần lịch được thêm vào trang. Thành phần tự thêm tính năng phương thức sẽ được sử dụng trong cửa sổ bật lên lịch.

Vì vậy, lý do để phá vỡ mô hình bật lên sẽ là một hoặc nhiều điều sau đây

• Đang tải nhiều hơn một phiên bản / tệp bootsrap js (đã rút gọn ...)
• Thêm lịch bên ngoài vào trang nơi bootstrap được sử dụng
• Thêm thông báo tùy chỉnh hoặc thư viện bật lên vào trang
• Bất kỳ thư viện nào khác có thêm hành vi bật lên

Trong khi làm việc với Angular (5), tôi gặp phải vấn đề tương tự, nhưng trong trường hợp của tôi, tôi đã giải quyết như sau:

thành phần.html

<button type="button" class="btn btn-primary"  data-target="#myModal" 
(click)="showresult()">fff</button>

<div class="modal" id="myModal" role="dialog"  tabindex="-1" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary">Save changes</button>
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

thành phần

LƯU Ý: cần nhập jquery trong tệp ts là "khai báo var $: any;"

  showresult(){
    debugger
    $('#myModal').modal('show');
  }

Những thay đổi tôi đã thực hiện:

• đã xóa "data-toggle =" modal "khỏi thẻ Nút (nhờ @miCRoSCoPiC_eaRthLinG câu trả lời này giúp tôi ở đây) trong trường hợp của tôi, nó hiển thị phương thức nên tôi đã tạo (click) =" showresult () "

• bên trong thành phần.ts cần khai báo Jquery ($) và bên trong nút bấm phương thức showresult () gọi "$ ('# myModal'). modal ('show');"

Tôi đã có cùng một vấn đề bởi vì tôi đã thay đổi phương thức của mình hai lần như hình dưới đây:

statusCode: {
    410: function (request, status, error) { //custom error code

        document.getElementById('modalbody').innerHTML = error;
        $('#myErrorModal').modal('toggle')
    }
},
error: function (request, error) {

    document.getElementById('modalbody').innerHTML = error;
    $('#myErrorModal').modal('toggle')
}

Tôi đã xóa một lần xuất hiện của:

$ ('# myErrorModal'). phương thức ('chuyển đổi')

và nó hoạt động như ma thuật!