Foundation-sites: 모달 포지셔닝을 공개하시겠습니까?

무슨 일이 일어나고 있는지 알아내는 데 도움이 될 수 있는 링크가 있습니까?

볼 수 있는 곳에서 실행하도록 하면 로그인 세부 정보가 포함된 메시지를 보내 드리겠습니다.

알겠습니다. 자세한 내용은 개인 메시지로 보내드리겠습니다.

css .column, .columns {position: relative;}에 규칙을 설정했다고 생각합니다.

표시 모달은 절대 위치에 있습니다. 고정이 안된 이유를 모르겠습니다. 스크롤을 가능하게 하시겠습니까?

따라서 절대 위치에 있는 모달은 첫 번째 위치에 있는 부모( class="eight columns" )에 맞춰 정렬됩니다. 다음과 같이 CSS를 추가할 수 있습니다.

.reveal-modal { 위치:고정;)

원하는대로 작동하는지 확인하십시오.

확인. Foundation's grid.css의 17행에서 가져온 것입니다.

좋아요. 나는 당신의 파일 이름을 읽을 수 없습니다. 저는 zurb 개발자가 아닌 사용자일 뿐입니다. 고정된 것을 시도하거나 모달 div의 중첩을 해제하고 html의 맨 아래에 넣을 수 있습니다.

사실, 모달을 위해 ColorBox로 전환했고 버그를 보고하고 싶었습니다(버그이고 내 실수가 아닌 경우). 문제를 찾는 데 도움을 주셔서 감사합니다! 나는 그것으로 몇 시간을 보냈지 만 문제를 찾을 수 없었습니다.

솔직히 말해서 이 대화의 비하인드 스토리를 따라갈 수는 없습니다. :) Reveal에 버그가 있습니까? 아니면 다른 스타일과 충돌합니까?

문제는 표시 모달을 열 안에 넣으면 표시 모달이 브라우저 창에 정렬되는 대신 해당 열에 정렬된다는 것입니다. 이것이 당신이 고칠 수 있는 일인지 아닌지 모르겠습니다.

공개 모달을 position:fixed 기본값으로 설정할 수 있는 것 같지만 반대하는 이유가 있는지 모르겠습니다.

오, 알았어. 예, Reveal 모달은 레이아웃이 아닌 페이지 끝에 배치되도록 설계되었습니다. 고정 대신 절대를 사용하므로 원하는 경우 페이지 스크롤을 유지할 수 있습니다. 그것을 position:fixed로 변경하면 문제가 해결됩니다.

아마도 문서에서 그것을 언급하는 것이 가장 좋습니다.

2011년 11월 30일 오후 7시 14분에 Jonathan [email protected]이 다음과 같이 썼습니다.

오, 알았어. 예, Reveal 모달은 레이아웃이 아닌 페이지 끝에 배치되도록 설계되었습니다. 고정 대신 절대를 사용하므로 원하는 경우 페이지 스크롤을 유지할 수 있습니다. 그것을 position:fixed로 변경하면 적합할 것입니다.

---

이 이메일에 직접 답장하거나 GitHub에서 확인하세요.
https://github.com/zurb/foundation/issues/129#issuecomment -2968907

@smileyj68 위치: 상대가 grid.css의 .column, .columns에서 무엇을 하는지 알 수 있습니까? 위치: 표시 모드에 고정된 것은 반응형 사이트에서 작업할 때 실제로 스크롤해야 하기 때문에 그다지 옵션이 아닙니다. 여기에 로컬로 덮어쓰고 문제가 있는지 테스트할 것입니다. 하지만 통찰력이 있다면 듣고 싶습니다.

이 문제는 저를 뒤에서 물었습니다. 문서화 되었으면...

그리고 저, 이 댓글을 잘 봤습니다. 문서에서 모든 것 뒤에 붙이라고 말하지만 Wordpress와 함께 사용할 때 바닥글에서 의미합니다. 왜 그렇게 해야 하는지 알려주면 편리할 것입니다.

나도. 위치로 설정한 후: 고정됨; 및 오버플로: 스크롤; 일이 잘 풀렸습니다.

어떤 해결책이?! 모달이 큰 경우 고정 위치를 설정하는 것은 좋은 생각이 아닙니다. 누구든지 해결책을 찾으면 여기에 작성하십시오. 감사합니다!

나는 여전히이 문제가 있습니다 :(! 해결책이 있습니까? PLZ

위치를 고정으로 설정하면 작동하지 않습니다

나는 그것을 작동시키는 데 성공했다. Foundation.css 및 Foundation.min.css를 열고 다음과 같이 두 파일에서 .reveal-modal 클래스의 위치를 ​​변경했을 때 절대 위치에서 고정으로 전환이 작동했습니다.

- 절대 고정
- top:50px ~ 30% (당신은 이것을 변경할 수 있습니다, 나는 그것을 볼 수 있을 만큼 충분히 내려오도록 그것을 변경해야 했습니다)

이것은 파운데이션을 정적 HTML 이상으로 사용하는 경우 확실히 문제입니다. Shopify용 My Foundation 테마 프레임워크에도 제품 이미지의 모달 팝업에 문제가 있습니다. .reveal-modal { position:fixed;overflow :scroll} 을 사용하면 확실히 도움이 됩니다. 그러나 그것은 진정한 해결책이 아닙니다. 이 경우 'Reveal'은 매우 추하고 비실용적일 수 있습니다. 내가 볼 수있는 한 순수한 CSS의 양은 이것을 고칠 수 없습니다.

현재 겪고 있는 문제는 Reveal 모달이 이전 릴리스의 상위 위치 지정에 의해 영향을 받았기 때문에 실제로는 Reveal 모달이 body 요소의 직계 자식으로만 있어야 한다는 것입니다.

버전 4.3.2에서는 이 문제가 표시되지 않아야 합니다. 모달이 표시되는 동안 body 의 직계 자식이 되도록 모달을 이동하여 CSS로 인해 발생하는 이상한 위치 문제를 완화하기 때문입니다. .

4.3.2에서 이 문제가 표시되는 경우 올바르게 작동하는지 확인하기 위해 특정 변경 사항을 적용했으므로 예를 들어 티켓을 여십시오.

나는 이 "Reveal 모달은 레이아웃이 아니라 페이지 끝에 배치되도록 설계되었습니다"가 문서에 배치되어야 한다는 데 동의합니다. @smileyj68님 의 댓글을 보기 전에 웹 전체를 검색해야

@chimdi2000 4.3.2부터는 자바스크립트가 올바른 위치에 없으면 자바스크립트가 이동하므로 더 이상 문제가 되지 않으므로 추가 문서가 필요하지 않다고 생각합니다.

감사합니다 @seantimm. Shopify Foundation 4 테마 프레임워크를 업데이트하는 것이 더 나을 것 같습니다!

@seantimm 4.3.2에서 내 위치 문제가 수정되었지만 표시 내부에 양식 요소가 있고 양식 외부로 이동하기 때문에 더 이상 제출할 수 없습니다.

사용자 지정 수정으로 문서의 특정 위치에 추가할 수 있도록 appendElement에 대한 설정을 추가했습니다. 향후 릴리스에서 이것을 추가할 가능성이 있습니까?

나는 이것이 오래된 스레드라는 것을 알고 있지만 2014년 12월 현재까지도 이 문제가 발생하고 있습니다. 충분히 간단한 수정이지만 이와 같은 프레임워크를 사용하는 요점은 기본 사항에 시간을 할애하지 않고 다른 곳에 시간을 집중할 수 있도록 하기 위함입니다.

향후 릴리스에서 이를 구체화할 계획이 있습니까? 모달이 고정 위치인지 절대 위치인지 선택하는 기능은 훌륭한 기능인 것 같습니다. 일부 sass 변수로 수행 할 수있는 것 같습니다.

@smileyj68 , 공개가 열려 있는 동안 페이지를 계속 스크롤할 수 있는 것이 바람직한 이유를 설명해 주시겠습니까? 모달이 열리면 페이지 콘텐츠가 차단되는 것 같습니다. 모달이 스크롤되도록 고정하고 오버플로 속성을 설정하는 것이 바람직하지 않습니까? 이것이 기본값이었다면 페이지 끝에 배치할 필요가 없었을 것입니다. 이는 많은 CMS 상황에서 어려운 일입니다.

또한 모든 프로젝트에서 공개 bg 위치를 절대에서 고정으로 변경해야 했습니다. 나는 그것이 절대적으로 설정되는 이유를 이해하지 못합니다.

오늘 아침에 비슷한 문제가 발생하여(foundation-rails 5.4.5 사용) .reveal-modal 에 다음을 추가하여 수정하고 페이지 중앙에 배치하여 해결했습니다.

.reveal-modal.open {
  position:fixed;
  top:50%!important; /* override inline style injected from JS */
  left:50%;
  transform:translate(-50%, -50%);
}