Khởi chạy phương thức Bootstrap khi tải trang

Tôi hoàn toàn không biết javascript. Tài liệu bootstrap nói với

Gọi phương thức qua javascript: $ ('# myModal'). Modal (tùy chọn)

Tôi không biết làm thế nào để gọi nó khi tải trang. Sử dụng mã được cung cấp trên trang bootstrap tôi có thể gọi thành công Modal khi nhấp vào phần tử, nhưng tôi muốn nó tải ngay lập tức khi tải trang.

Chỉ cần bọc phương thức bạn muốn gọi khi tải trang bên trong một loadsự kiện jQuery trên phần đầu của tài liệu của bạn và nó sẽ bật lên, như vậy:

Mã não

<script type="text/javascript">
    $(window).on('load',function(){
        $('#myModal').modal('show');
    });
</script>

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

Bạn vẫn có thể gọi phương thức trong trang của mình bằng cách gọi nó bằng một liên kết như vậy:

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

Bạn không cần javascript hiển thị phương thức

Cách đơn giản nhất là thay thế "ẩn" bằng "trong"

class="modal fade hide"

vì thế

class="modal fade in"

và bạn cần thêm onclick = "$('.modal').hide()" vào nút đóng;

PS: Tôi nghĩ cách tốt nhất là thêm tập lệnh jQuery:

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

Chỉ cần thêm như sau-

class="modal show"

Ví dụ làm việc-

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- 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 show" 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>

Bạn có thể thử mã có thể chạy này-

$(window).load(function()
{
    $('#myModal').modal('show');
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- 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>

Nhiều hơn có thể được tìm thấy ở đây .

Hãy nghĩ rằng bạn có câu trả lời hoàn chỉnh của bạn.

liên quan đến những gì Ilich của Andre nói rằng bạn phải thêm tập lệnh js sau dòng trong cái mà bạn gọi là jquery:

<script src="content/bootstrapJS/jquery-2.1.1.min.js" type="text/javascript"></script>

<script type="text/javascript">
     $(window).load(function(){
         $('#myModal').modal('show');
      });
</script>

trong trường hợp của tôi đó là vấn đề hy vọng nó sẽ giúp

Trong trường hợp của tôi, việc thêm jQuery để hiển thị phương thức không hoạt động:

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

Có vẻ là do phương thức có thuộc tính aria-hidden = "true":

<div class="modal fade" aria-hidden="true" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Xóa thuộc tính đó là cần thiết cũng như jQuery ở trên:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

Lưu ý rằng tôi đã thử thay đổi các lớp phương thức từ modal fadesang modal fade in, và điều đó không hiệu quả. Ngoài ra, việc thay đổi các lớp từ modal fadeđể modal showdừng phương thức có thể bị đóng.

Đây là một giải pháp [không cần khởi tạo javascript!]

Tôi không thể tìm thấy một ví dụ mà không khởi tạo phương thức của bạn bằng javascript $('#myModal').modal('show'), vì vậy đây là một gợi ý về cách bạn có thể triển khai nó mà không bị chậm javascript khi tải trang.

1. Chỉnh sửa div container phương thức của bạn với lớp và kiểu:

<div class="modal in" id="MyModal" tabindex="-1" role="dialog" style="display: block; padding-right: 17px;">

2. Chỉnh sửa cơ thể của bạn với lớp và phong cách:

   <body class="modal-open" style="padding-right:17px;">

3. Thêm div mod-backdrop

   <div class="modal-backdrop in"></div>

4. Thêm tập lệnh

   $(document).ready(function() {
       $('body').css('padding-right', '0px');
       $('body').removeClass('modal-open');
       $('.modal-backdrop').remove();
   
       $('#MyModal').modal('show'); });

   Điều gì sẽ xảy ra là html cho phương thức của bạn sẽ được tải khi tải trang mà không có bất kỳ javascript nào (không chậm trễ). Tại thời điểm này, bạn không thể đóng phương thức, vì vậy đó là lý do tại sao chúng tôi có tập lệnh document. Yet, để tải phương thức đúng khi mọi thứ được tải. Chúng tôi thực sự sẽ xóa mã tùy chỉnh và sau đó khởi tạo phương thức, (một lần nữa), với .modal ('show').

Bạn có thể kích hoạt phương thức mà không cần viết bất kỳ JavaScript nào thông qua các thuộc tính dữ liệu.

Tùy chọn "hiển thị" được đặt thành true hiển thị phương thức khi được khởi tạo:

<div class="modal fade" tabindex="-1" role="dialog" data-show="true"></div>

Giống như những người khác đã đề cập, tạo phương thức của bạn với display: block

<div class="modal in" tabindex="-1" role="dialog" style="display:block">
...

Đặt phông nền ở bất cứ đâu trên trang của bạn, nó không nhất thiết phải ở dưới cùng của trang

<div class="modal-backdrop fade show"></div> 

Sau đó, để có thể đóng hộp thoại lại, hãy thêm cái này

<script>
    $("button[data-dismiss=modal]").click(function () {
        $(".modal.in").removeClass("in").addClass("fade").hide();
        $(".modal-backdrop").remove();
    });
</script>

Hi vọng điêu nay co ich

Đã thử nghiệm với Bootstrap 3 và jQuery (2.2 và 2.3)

$(window).on('load',function(){
  $('#myModal').modal('show');
});



<!-- 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"><i class="fa fa-exclamation-circle"></i>&nbsp; //Your modal Title</h4>
        </div>
        <div class="modal-body">
          //Your modal Content
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        </div>
      </div>

    </div>
</div>

https://jsfiddle.net/d7utnsbm/

<div id="ModalStart" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-body">
          <p><i class="icon-spinner icon-spin icon-4x"></i></p>
    </div>
</div>

Bạn có thể hiển thị nó khi bắt đầu ngay cả khi không có Javascript. Chỉ cần xóa lớp "ẩn".

class="Modal"

Ngoài câu trả lời của người dùng2545628 và Reft, không có javascript nhưng vớimodal-backdrop in

3 điều cần thêm

1. một div với các lớp modal-backdrop in trước lớp .modal
2. style="display:block;" đến lớp .modal
3. fade in cùng với lớp .modal

Thí dụ

<div class="modal-backdrop in"></div>

<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="channelModal" style="display:block;">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title" id="channelModal">Welcome!</h4>

            </div>

            <div class="modal-body" style="height:350px;">

                How did you find us?

            </div>

        </div>

    </div>

</div>

Cập nhật 2020 - Bootstrap 4

Đánh dấu phương thức đã thay đổi một chút cho Bootstrap 4. Đây là cách bạn có thể mở phương thức khi tải trang và tùy chọn hiển thị độ trễ của phương thức ...

$(window).on('load',function(){
    var delayMs = 1500; // delay in milliseconds

    setTimeout(function(){
        $('#myModal').modal('show');
    }, delayMs);
});    

<div class="modal fade" id="myModal">
      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">My Modal</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary mx-auto" data-dismiss="modal">Close</button>
                </div>
            </div>
      </div>
</div>

Bản demo trên Codeply

Trong bootstrap 3, bạn chỉ cần khởi tạo phương thức thông qua js và nếu trong thời điểm tải trang, đánh dấu phương thức có trong trang thì phương thức sẽ hiển thị.

Trong trường hợp bạn muốn ngăn chặn điều này, hãy sử dụng tùy chọn show: falsenơi bạn khởi tạo phương thức. Một cái gì đó như thế này: $('.modal').modal({ show: false })

Bạn có thể muốn tiếp tục jquery.jstrì hoãn để tải trang nhanh hơn. Tuy nhiên, nếu jquery.jsđược hoãn lại $(window).loadcó thể không hoạt động. Sau đó bạn có thể thử

setTimeout(function(){$('#myModal').modal('show');},3000);

nó sẽ bật lên phương thức của bạn sau khi trang được tải hoàn toàn (bao gồm cả jquery)

Để tránh bootstrap bị ghi đè và mất chức năng của nó, chỉ cần tạo một nút khởi động thông thường, cung cấp Id và 'nhấp vào nó' bằng cách sử dụng jquery, như vậy: Nút khởi chạy:

<button type="button" id="btnAnouncement" class="btn btn-primary" data-toggle="modal" data-target="#modalAnouncement">
  See what´s new!
</button>

Trình kích hoạt jQuery:

$(document).ready(function () {
  $('#btnAnouncement').click();
)}

Hy vọng nó giúp. Chúc mừng!

Ví dụ đơn giản Tạo trình tải spinner của phương thức bootstrap

<!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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
  $(document).ready(function(){
  $('#myModal').modal('show'); 
  setTimeout(function(){
  $('#myModal').modal('hide'); 
  }, 5000);
   });
  </script>
  <style>
.loader {
  border: 13px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 100px;
  height: 100px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.modal-dialog{
width: 150px;
    margin: 10% auto;
}
.modal-content{
background-color: transparent; 
   border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
}
</style>
</head>
<body>

<div class="container">

  <!-- Modal -->
  <div class="modal fade" data-backdrop="static" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-body">
         <div class="loader"></div>
        </div>

      </div>

    </div>
  </div>

</div>

</body>
</html>