Phương thức Bootstrap: nền nhảy lên đầu khi bật tắt

110

Tôi có một vấn đề, với một phương thức. Tôi có một nút trên một trang, nút này sẽ chuyển đổi phương thức. Khi phương thức hiển thị, trang sẽ chuyển lên đầu trang.

Tôi đã làm mọi cách để tìm ra giải pháp / vv, nhưng tôi thực sự bị lạc.

BIÊN TẬP:

Tôi cũng đã thử với: $('#myModal').modal('show');nhưng nó có tác dụng chính xác.

javascript  jquery  css  twitter-bootstrap  twitter-bootstrap-3 
— FooBar
nguồn
Xin chào Benni. Vâng, tôi thách thức. Tôi cũng đã thử với: $ ('# myModal'). Modal ('show'); nhưng nó có cùng một tác dụng.
— FooBar
1
điều này có thể giúp bạn không, cùng một vấn đề: stackoverflow.com/questions/12894570/…
— Đánh dấu
@Mark, Xem câu trả lời của tôi bên dưới ...
— Ravimallya
Tôi nhận thấy rằng nếu tôi nhấp vào bất kỳ đâu trong windowđó phương thức sẽ kích hoạt. Điều đó có vẻ kỳ lạ một bất ngờ. Tôi đã xóa buttonthông qua devtools và nhấp vào bất kỳ đâu trên trang vẫn mở cửa sổ phương thức. Đó có phải là hành vi mong muốn không? Tôi tự hỏi nếu bạn không có bộ chọn phù hợp cho sự kiện nhấp chuột phương thức.
— dward

Câu trả lời:

174

Khi phương thức mở, một modal-openlớp được đặt thành <body>thẻ. Lớp này đặt overflow: hidden;thành phần thân. Thêm quy tắc này vào biểu định kiểu của bạn để ghi đè kiểu bootstrap.css:

body.modal-open {
    overflow: visible;
}

Bây giờ cuộn sẽ ở đúng vị trí.

— pstenstrm
nguồn
@pstenstrm, tôi nghi ngờ. bạn đã yêu cầu ghi đè css cho lớp .modal-open. Nhưng, điều gì sẽ xảy ra nếu có thêm div đóng và trong câu trả lời của tôi, tôi không ghi đè bất kỳ lớp nào trong giải pháp của mình? Nó hoạt động tốt sau khi loại bỏ 2 div thừa. bs modal thêm div .modal-backdrop sẽ nhầm lẫn nơi cần đóng vì có thêm thẻ đóng.
— Ravimallya
4
Không hiệu quả với tôi, tôi có phương thức bên trong iframe và nó đang cuộn lên đầu ... bất kỳ ý tưởng nào?
— Cabuxa.Mapache
5
CÁi này đã sửa nó giúp tôi. Chỉ cần thêm gốc rễ của vấn đề của tôi là 'body {height: 100%}'.
— PeteG
23
Không làm việc cho tôi. Tôi có một chế độ vani mà tôi đang mở .modal('show')và nó vẫn cuộn lên đầu trang. Bootstrap v3.2.0
— MandM
6
Tôi đã phải thêm position: inheritvào lớp này nhưng làm việc như một cái duyên sau đó.
— adrian3martin
28

Nếu bạn đang gọi phương thức với thẻ. Thử xóa '#' khỏi thuộc tính href và phương thức gọi với thuộc tính dữ liệu.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
— Gokhan
nguồn
Tôi mở nó chính xác như bạn đã đăng ở đó. Kiểm tra liên kết
— FooBar
5
nếu bạn không sử dụng "<button>" nhưng <a>, như trong trường hợp của tôi, bạn sẽ mất biểu tượng "nút ngón tay" khi bạn di chuyển con trỏ chuột trên đối tượng. Để khắc phục điều này, tôi đã làm như vậy: ... href = "# mai_modal_id" dữ liệu chuyển đổi = "phương thức" ... và tôi không sử dụng dữ liệu mục tiêu
— pagurix
3
@pagurix - Nhận xét của bạn phù hợp nhất với kịch bản của tôi.
— AlfredBr
Tôi nghĩ, @pagurix nên viết bình luận của mình như một câu trả lời riêng. Chỉ có điều đó đã giúp. ThumbsUp!
— Vibhor Dube
14

nếu bạn đang sử dụng thẻ liên kết <a href"#" ..> ... </a>và href="#"đang tạo ra vấn đề, hãy loại bỏ nó. Bạn có thể đọc thêm ở đây

— Nimesh Jain
nguồn
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Điều này sẽ giúp bạn ngăn thanh cuộn ở trên cùng.

— Georgi Mirchev
nguồn
5

Có thể làm việc với các phương thức được lồng ở đâu đó trong mã:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

Đối với tôi, đó là sự kết hợp của vị trí, chiều cao và độ tràn.

— Dennis Heiden
nguồn
4

Tôi không thấy lỗi cụ thể, nhưng tôi khuyên bạn nên kiểm tra cú pháp html của mình .

Một thử nghiệm nhỏ với nguồn của bạn cho tôi những lỗi như

Dòng 127, Cột 34: div phần tử mở.

              <div class="inner onlySides">

Đây có thể là một vấn đề.

— billyJoe
nguồn
Cảm ơn bạn - tôi sẽ xem xét điều này - mặc dù tôi cảm thấy khó tin rằng điều này có thể gây ra sự cố mà tôi đang gặp phải. Có vẻ như bạn đang sử dụng một plugin để theo dõi điều này - nếu vậy; cái nào?
— FooBar
tôi không sử dụng plugin ngoại trừ firebug. Kiểm tra tính hợp lệ trang của bạn trên validator.w3.org luôn là điều tốt . Nó sẽ là một vấn đề bởi vì nếu bạn có div không khép kín, bạn sẽ có hành vi kỳ lạ :)
— billyJoe
4

Cách dễ nhất để giải quyết nền nhảy là xác định hai tham số:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
— Nils
nguồn
3

Tôi đã thử tái tạo sự cố này trên máy chủ cục bộ của mình và có vẻ lạ là có xung đột với tệp Bootstrap JS mà bạn đang sử dụng.

Hãy thử bình luận mã của bạn về:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

Và thay vào đó hãy sử dụng Bootstrap 2.3.2:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Điều này làm cho nó hoạt động cho tôi.

Tôi đã thử nó với Bootstrap phiên bản 3 nhưng điều đó không hoạt động. Tôi vẫn không thể xác định chính xác phần rắc rối nhưng ở đâu đó trên Firebug đã ném cho tôi một e.preventDefault() is not a functionlỗi - tôi đoán đây phải là nguyên nhân gốc rễ nhưng tôi vẫn chưa so sánh nó với các tệp JS khác.

— AyB
nguồn
3

Tôi đã cố gắng đặt .modal top ở giữa màn hình. 

.modal {
    position: absolute;
    top: 50%;
}

Chỉ là 2 xu suy nghĩ của tôi.

— Holger Thiebosch
nguồn
Đủ gần. Tôi sẽ không phản đối vì vấn đề của tôi có thể nằm ở chỗ khác, nhưng điều này khiến nửa dưới của màn hình bị mờ đi, nhưng phương thức được đặt về phía trung tâm.
— crafter
3

Trong bootstrap 3.1.1, tôi đã giải quyết bằng giải pháp này:

body.modal-open {
    position: absolute !important;
}
— Filo
nguồn
2
Bạn lưu ngày của tôi @Filo Cảm ơn bạn rất nhiều
— vinothini
2

bạn có thêm 2 divthẻ đóng ngay trước <div id="footer">hoặc sau <div id="mainFrame" class="group">div. Tôi đang sử dụng visual studio 2012 express để kiểm tra điều này.

Vui lòng loại bỏ 2 div thừa này và cho chúng tôi biết nó hoạt động như thế nào. Tôi đã loại bỏ các div thừa và loại bỏ tất cả các tập lệnh tùy chỉnh. chỉ giữ lại lõi jquery và bootstrap ở chân trang. đây là ảnh chụp màn hình của đầu ra cuối cùng. đây là sân chơi jsbin cho bạn đang hoạt động tốt.

Tôi khuyên bạn nên sử dụng headjs để tải tất cả các tập lệnh và tệp css. cũng không phải là một thực hành tốt khi loadidng bất kỳ tập lệnh nào hai lần.

nhập mô tả hình ảnh ở đây

— Ravimallya
nguồn
4
các câu trả lời không được tán thành cần nhận xét thích hợp với lý do.
— Ravimallya
2

Hãy thử sử dụng điều này để mở modal và xem điều gì sẽ xảy ra:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
— xe tay ga
nguồn
2 
body.modal-open {
overflow: visible !important;
}

Tôi cần thuộc tính quan trọng để sửa nó

— Chóng mặt
nguồn
Điều này phù hợp với tôi và tôi đã gặp sự cố của @ MandM (trong phần nhận xét) từ câu trả lời của pstenstrm: "Không phù hợp với tôi. Tôi có một phương thức vani mà tôi đang mở bằng .modal ('show') và nó vẫn cuộn lên đầu trang. Bootstrap v3.2.0 ". Hiệu ứng kỳ lạ duy nhất mà nó có là bây giờ nền sẽ cuộn nếu bạn tiếp tục cuộn một phương thức cao hơn cửa sổ, nhưng đây là một vấn đề nhỏ đối với tôi. Cảm ơn.
— dgig
1

Tôi gặp sự cố tương tự khi sử dụng Bootstrap 2.3.2

Đó là sự cố khi nhấp vào liên kết:

Bí quyết là: return false;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

và js:

function openModal() {
    $('#myModal').modal('show');
}
— mpccolorado
nguồn
1

Tôi đã dành hàng giờ cho việc này để thử mọi thứ ở đây và nơi khác. Để sử dụng anglejs-material, hóa ra tôi phải tắt hoạt ảnh trên đối tượng config uibModal.open.

Ví dụ:

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

Hy vọng điều này sẽ giúp người khác.

— Bãi biển Nathan
nguồn
1

Nếu bạn đang gặp phải sự cố này trong một chương trình Angular, hãy thêm đoạn mã dưới đây vào dòng đầu tiên của tệp .scss.

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
— gấu trúc sibashankar
nguồn
0

Tôi đã gặp vấn đề tương tự và tôi nghĩ rằng tôi đã tìm ra nó. Bạn chỉ cần đặt HTML phương thức làm con trực tiếp của thẻ body ! Tuy nhiên, bạn có thể đặt mã HTML cho nút kích hoạt phương thức ở bất cứ đâu bạn cần. Tôi tin rằng điều này tránh được các vấn đề về kế thừa và vị trí CSS gây ra sự cố này.

Thí dụ:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
</body>
— nunoarruda
nguồn
0

Cuối cùng đã tìm ra điều này. KHÔNG bọc nút nhắm mục tiêu phương thức trong thẻ liên kết.

Xấu

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

Tốt

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
— ALFmachine
nguồn
0

Điều này đã làm điều đó cho tôi

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
— warkitty
nguồn
Tôi đã gặp sự cố tương tự với điều hướng và vùng chứa nhảy khi phương thức được mở. Đây là những gì tôi đang tìm kiếm.
— Awhitey98
Rất vui vì nó đã giúp!
— warkitty
0

Sau khi đọc hàng tá câu trả lời trong vài giờ, tôi đã sao chép lại mã gốc từ tệp bootstrap và gỡ lỗi từng bước để xem nguyên nhân khiến tôi luôn nhảy lên đầu. Bởi vì phiên bản mới nhất thực tế của Bootstrap 3 đang hiển thị phương thức ở vị trí bạn đang ở ngay bây giờ. Tôi đã phát hiện ra điều đó -webkit-transform: translate3d(0,0,0);và height: 100%trong css body-tag của tôi đã gây ra hành vi này. Có lẽ điều này sẽ giúp một số người.

— AlexioVay
nguồn
0

Đối với tôi hoạt động khi tôi thay đổi phiên bản từ 3.1.1 sang 3.3.7

Nếu bạn không phải sử dụng phiên bản 3.3.1, hãy thử thay thế.

Sau khi thay đổi, bạn nên kiểm tra xem phần còn lại của chức năng có hoạt động chính xác hay không.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

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

body.modal-open { position: inherit; }

Điều này làm việc như một cái duyên đối với tôi.

— Nimish goel
nguồn
0

Tôi đã thử tất cả các ví dụ trên - đây là điều duy nhất phù hợp với tôi:

.modal-open {

            padding-right: 0 !important;

        }

Loại bỏ phần đệm ở phía bên phải của mô hình - ngăn chặn bước nhảy.

— Stnfordly
nguồn
0

height: 100% là giải quyết được vấn đề, nhưng bạn phải thêm đúng "div"

— Anar Ali
nguồn
0

Tôi gặp vấn đề tương tự và không có câu trả lời nào giúp tôi. Tìm thấy một giải pháp có vẻ ngu ngốc nhưng nó hoạt động ít nhất trong trường hợp của tôi.

Tôi thấy rằng trang chỉ cuộn lên đầu một lần và sau đó, các chế độ mở tiếp theo hoạt động như mong đợi. Tôi thấy rằng việc ẩn bất kỳ phần tử nào trong DOM sẽ khởi tạo cùng một cuộn kỳ lạ. Vì vậy, tôi chỉ tạo một div giả sau khi tải trang hơn là ẩn và xóa nó và điều này đã giải quyết được vấn đề.

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
— Borzilo Andrey
nguồn
0

Tôi đã phải đối mặt với cùng một vấn đề. Vấn đề là tôi đã thêm lớp .modal-open vào html và các phần tử body. Chỉ cần thêm lớp này vào cơ thể và mọi thứ hoạt động như mong đợi.

— nói chung666
nguồn
-1

Hãy thử nó hoạt động hoàn hảo

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
— tay sai
nguồn
-3

Nếu câu trả lời của pstenstrm không phù hợp với bạn, hãy thử kết hợp nó với HTML nút thay thế này:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

Điều này sẽ giữ cho nút trên màn hình.

— Ben
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.