Twitter bootstrap modal không hoạt động

Tôi mới dùng Twitter Bootstrap. Tôi đang làm việc trên một bảng điều khiển phương thức, nhưng nó không được hiển thị. Nó làm mờ màn hình, nhưng bản thân phương thức không xuất hiện. Tôi đã kiểm tra bảng điều khiển lỗi và không có lỗi.Twitter bootstrap modal không hoạt động

Mã của tôi nằm trong thẻ <head>; Tôi bao gồm các kịch bản như:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="<?php echo $ruadmin ?>js/bootstrap.js"></script> 
<script src="<?php echo $ruadmin ?>js/tablesorter/jquery.tablesorter.js"></script> 
<script src="<?php echo $ruadmin ?>js/tablesorter/tables.js"></script>

trang Modal:

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

<!-- 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">Welcome</h3> 
    </div> 
    <div class="modal-body"> 
    <p> Hello </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>

Nguồn

2013-12-09 baig

Tôi đã có bootstrap.js và bootstrap.min.js được thêm qua bundleconfig trong dự án asp.net MVC của tôi và chứng kiến tất cả hoạt động tốt sau khi xóa bootstrap.min.js và chỉ giữ bootstrap.js – hiFI

Bạn cần sử dụng thẻ data-target.

Cố gắng thay thế thuộc tính href="#myModal" bằng data-target="#myModal". Bên cạnh đó, bạn đã đặt một lớp học hide, tôi đoán nó không nên ở đó.

Nhìn vào ví dụ here

Nguồn

2013-12-09 14:11:10

vâng nó hoạt động. vấn đề là do 'hide' class.thanks :) – baig

Thay đổi này:

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

Để này:

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

(nhận xét rằng việc thay đổi a thẻ để button thẻ không được câu trả lời nhưng nó là thêm thuộc tính data-target và data-toggle thực hiện "công việc")

hãy nhìn vào ví dụ này:

<!DOCTYPE html > 

<html> 
<head> 
    <title>Bootstrap Modal</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>  
    <!-- Bootstrap --> 
    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> 
    <!-- Optional theme --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css"> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> 
</head> 
<body> 
    <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button> 

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
        <h4 class="modal-title" id="purchaseLabel">Purchase</h4> 
       </div> 
       <div class="modal-body"> 
        sup? 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
        <button type="button" class="btn btn-primary">Purchase</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

Nguồn

2013-12-09 14:14:43 sabotero

Thay đổi' a' thành 'button' sẽ không làm gì cả. Bí quyết là đặt thuộc tính 'data-target'. Bạn nên làm nổi bật điều đó trong câu trả lời của bạn. – Mrchief

@ Đã xong! ;) – sabotero

tôi đã cùng một vấn đề, tôi nhận ra tôi bao gồm các thư viện jQuery sau bootstrap.

Kiểm tra để thấy rằng trong trang web của bạn, bạn thêm/liên kết jQuery đầu tiên và sau đó Bootstrap

Nguồn

2015-12-06 21:26:30 s1gm9

yeah bạn đã đúng. –

Trong trường hợp ai đó chạy vào vấn đề này và không ai trong số các tác phẩm trên, tôi không có phai lớp css trong lớp thuộc tính của phương thức của tôi

tôi đã div của phương thức của tôi như thế này

<div class="modal" id="AdvanceSearchModal" tabindex="-1" role="dialog">

tôi đã thêm lớp phai

<div class="modal fade" id="AdvanceSearchModal" tabindex="-1" role="dialog">

và với phương thức này sẽ mở lại

Nguồn

2016-08-12 17:16:01 FFHanzel

Twitter bootstrap modal không hoạt động

Trả lời

Các vấn đề liên quan