Ngăn trang nhảy từ: bộ chọn mục tiêu

Question

Vì vậy, tôi có phương thức này bật lên bằng cách sử dụng bộ chọn CSS: target. Tuy nhiên, trang sẽ chuyển đến neo khi được nhấp. Tôi muốn ngăn trang nhảy tới: bộ chọn mục tiêu. Tôi có thể làm cái này như thế nào?

<a href="#openModal">Info</a> 

<div id="openModal" class="modalDialog"> 

CSS:

.modalDialog { 
    position: absolute; 
    pointer-events: none; 
    z-index: 99999; 
opacity:0; 
} 

.modalDialog:target { 
    opacity:1; 
    pointer-events: auto; 
} 

.modalDialog > div { 
    width: 900px; 
    height: 506px; 
    position: relative; 
    background: rgba(0,0,0,0.9); 
} 

Answer 1

này không có gì để làm với CSS trên thực tế, đó là HTML thuần tuý cũ.

Bạn có một id băm trong liên kết của mình, nó tham chiếu đến một phần tử trên trang. Mỗi trình duyệt sẽ cuộn trang đến phần tử được tham chiếu khi liên kết đó được nhấp vào. Đó là hành vi rất chuẩn.

Bạn không thể ngăn điều đó ngoài việc không sử dụng kỹ thuật này. Vâng, có thể có một cách để ngăn chặn việc cuộn bằng ma thuật đen của JavaScript, nhưng bạn không nên.

Sử dụng một số jQuery thay vì: http://docs.jquery.com/Tutorials:Basic_Show_and_Hide

Answer 2

thử dừng hành động mặc định của thẻ neo

$('a').on('click', function(e){ 
    e.preventDefault(); 

    //do your poppin' up here. 
}); 

Answer 3

Bạn đã thử các css3: tập trung chọn?

https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

Cũng

CSS Menu - Keep parent hovered while focus on submenu

Bạn cũng có thể sử dụng thẻ <button> thay vào đó và tạo kiểu cho nó tuy nhiên bạn xin vui lòng. Điều đó sẽ ngăn trang của bạn nhảy vì nó không phải là một neo.

Answer 4

Làm cho .modalDialogposition: fixed thay vì absolute. Điều này sẽ làm cho nó luôn luôn được định vị ở bất cứ nơi nào trang hiện đang được cuộn.

Một ví dụ hoàn chỉnh hơn: http://codepen.io/mblase75/pen/xbRNeV

(Có một số thủ đoạn gian trá khác có liên quan trong đó bản demo codepen - thêm mục tiêu khác chuyển đến nút 'gần' trên phương thức đó cũng là fixed giữ trang từ di chuyển khi modal được đóng lại, và thay đổi z-index của phương thức của bạn từ -1 để 100 (hoặc một số nguyên phù hợp lớn khác) sẽ giữ cho nó khỏi chặn nhấp chuột ngay sau khi bạn đóng nó lại.)

Answer 5

Sử dụng

<a href="#/">...</a> 

để thay đổi: chọn mục tiêu trong CSS nhưng đi đến đâu cả. Đoạn #/không tồn tại, vì vậy trang sẽ không cuộn, nhưng trình chọn mục tiêu: sẽ thay đổi để ảnh hưởng đến thay đổi CSS.