iframe 에서 boottstrap 의 모드 상 자 를 부모 페이지 에 팝 업 하 는 데 문제 가 발생 했 습 니 다.

요 며칠 동안 프로젝트 를 작성 할 때 페이지 는 iframe 을 사 용 했 지만 하위 페이지 에서 bootstrap 의 모드 상 자 를 사 용 했 을 때 팝 업 의 모드 상자 위 치 는 하위 페이지 를 기준 으로 가운데 에 있 고 마스크 층 도 하위 페이지 의 일부분 만 있 기 때문에 전체 페이지 를 직시 할 수 없 기 때문에 생각 하면 모드 상자 가 부모 페이지 를 기준 으로 팝 업 되 고 인터넷 을 통 해 자 료 를 찾 을 수 있다.한 가지 해결 방법 을 총 결 하 였 다.
효과 전시
이전 페이지 수정
这里写图片描述

수정 후 페이지

사고의 방향 을 실현 하 다.
최상 위 페이지 에 모드 상 자 를 열 려 면 boottstrap 의 모드 상 자 를 부모 페이지 에 튕 기 면 됩 니 다.
우선 팝 업 이 필요 한 div 는 페이지 를 따로 쓸 것 입 니 다.하위 페이지 가 팝 업 이 필요 할 때 부모 페이지 에서 div 를 팝 업 하면 됩 니 다.
모드 상 자 를 한 페이지 로 단독으로 쓰기
홈 페이지


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
        </div>
      </div>
    </div>
  </body>
  <script>
      $("#ajax").modal({
        remote: "./model.html"
      });
  </script>
</html>

모드 상자 페이지


<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</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-primary">  </button>
    <button type="button" class="btn btn-default" data-dismiss="modal">  </button>
  </div>
</div>

이렇게 하면 모드 상자 의 div 를 한 페이지 로 단독으로 쓸 수 있다.
홈 페이지 수정,하위 페이지 추가
수정 후 홈 페이지


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <table width="100%" height="720px" border="1">
      <tr>
        <td>
          <iframe id="iframe1" name="iframe1" src="iframe1.html" width="100%" height="100%"></iframe>
        </td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td>
          <iframe name="iframe2" src="iframe2.html" width="100%" height="100%"></iframe>
        </td>
      </tr>
    </table>
    <input type="text" id="textId" value="234" />
    <div class="modal fade" id="ajax" role="basic" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
        </div>
      </div>
    </div>
  </body>
  <script>
    function modalOut(url) {
      $("#ajax").modal({
        remote: url;
      });
    }
  </script>
</html>

이렇게 하면 홈 페이지 에 두 개의 하위 페이지 가 있 고 팝 업 모드 상자 의 방법 을 modalOut(url)방법 에 밀봉 합 니 다.
하위 페이지 팝 업 모드 상자
하위 페이지 가 모드 상 자 를 팝 업 해 야 할 때 부모 페이지 의 modalOut(url)방법 을 불 러 오 면 됩 니 다.
하위 페이지 js 는 다음 과 같 습 니 다.


var _iframe = window.parent;
_iframe.modalOut('xxx.html');

이상 은 하위 페이지 에서 팝 업 모드 상자 가 모든 페이지 를 덮어 쓸 수 없 는 해결 방법 입 니 다.
메모:따라서 html 에 js 를 불 러 오지 않 았 습 니 다.boottstrap 과 관련 된 js 를 스스로 불 러 오 십시오.
총결산
위 에서 말 한 것 은 작은 편집 이 여러분 에 게 소개 한 iframe 에서 boottstrap 의 모드 상 자 를 부모 페이지 에 팝 업 하 는 데 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.작은 편집 자 는 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

부트스트랩 5 스티커

Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

iframe 에서 boottstrap 의 모드 상 자 를 부모 페이지 에 팝 업 하 는 데 문제 가 발생 했 습 니 다.

좋은 웹페이지 즐겨찾기