나는 간단한 대화 상자를 얻기 위해 animatedModal.js 를 사용 하고있다. 모든 것이 매력처럼 작동하지만 내 페이지 상단에있는 내 로고의 링크를 클릭 할 수 없습니다.
opacity:0;
z-index:-9999;
앞에 있습니다. 그것은 다른 모든 것 뒤에 있고 불투명도는 0입니다. 그래야만했지만 어쨌든 로고 앞에는 여전히 있습니다. 로고가 z-index:100있지만 여전히 보이지 않는 모달이 앞에 있습니다.
온라인 버전 animatedModal.js(예 : cdnjs.com 또는 smth)을 찾을 수 없기 때문에 바이올린을 만들 수는 없지만 여기에서 내 웹 페이지를 확인할 수 있습니다.
문제는 아주 간단합니다. Z- 색인 추적을 잃고 있습니다. Z- 색인을 설정 한 모든 지점이 없지만이 두 가지가 중요하다는 것을 알았습니다.
따라서 브라우저는 항상 콘텐츠가 태그 위에 있기를 원한다는 것을 이해합니다. 따라서이를 염두에두고 모달 용 Z- 색인을 설정하는 방법을 살펴 보겠습니다.
즉, 로고에있는 Z- 색인이 무엇이든 상관없이 항상 모달 아래에 있습니다.
요약 : 수정 사항은 콘텐츠 Z- 색인이 태그보다 낮도록 설정되었습니다. 또는 모달이 호출 링크 옆에있을 필요가 없으므로 DOM을 재구성하십시오. 두 번째를 선택하면 Z- 색인이 시작될 수있는 태그를 설정합니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다