iframe의 상위 페이지에 모달 상자를 팝업하기 위해 부트스트랩을 사용하는 방법에 대한 자세한 설명-JS 튜토리얼-php.cn

iframe의 상위 페이지에 모달 상자를 팝업하기 위해 부트스트랩을 사용하는 방법에 대한 자세한 설명

巴扎黑

풀어 주다： 2017-08-11 10:34:39

원래의

2055명이 탐색했습니다.

이 글은 주로 iframe의 상위 페이지에 부트스트랩 모달 상자 팝업을 만드는 문제를 소개합니다. 해결 방법은 매우 훌륭하고 참고할 만한 가치가 있습니다.

지난 며칠 동안 글을 쓸 때 참고할 수 있습니다. 프로젝트에서는 Iframe 페이지를 사용했는데 하위 페이지에서 부트스트랩 모달 상자를 사용했을 때 팝업 모달 상자의 위치가 하위 페이지를 기준으로 중앙에 있고 마스크 레이어는 일부만 있는 것을 발견했습니다. 하위 페이지로 인해 전체 페이지를 직접 볼 수 없게 되어 상위 페이지를 기준으로 모달박스가 팝업될 수 있는지 고민하다가, 인터넷에서 정보를 검색한 후 해결 방법을 정리했습니다.

효과 표시

수정 전 페이지

iframe의 상위 페이지에 모달 상자를 팝업하기 위해 부트스트랩을 사용하는 방법에 대한 자세한 설명

수정 후 페이지

iframe의 상위 페이지에 모달 상자를 팝업하기 위해 부트스트랩을 사용하는 방법에 대한 자세한 설명

구현 아이디어

모달 상자를 상단에 열려면 , 내가 생각한 방법은 상위 페이지에 부트스트랩 모달 상자 팝업을 표시하면 됩니다.

먼저, 팝업되어야 하는 p에 대해 별도의 페이지를 작성합니다. 하위 페이지가 팝업되어야 할 경우 상위 페이지에 p를 팝업하면 됩니다.

모달 상자를 별도의 페이지로 작성

메인 페이지

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

로그인 후 복사

모달 상자 페이지

<p class="modal-content">
  <p class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </p>
  <p class="modal-body">
    这是模态框
  </p>
  <p class="modal-footer">
    <button type="button" class="btn btn-primary">保存</button>
    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
  </p>
</p>

로그인 후 복사

이렇게 하면 모달 상자의 p를 별도의 페이지로 작성할 수 있습니다

메인 페이지 수정 및 하위 페이지 추가

수정된 메인 페이지

<!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" />
    <p class="modal fade" id="ajax" role="basic" aria-hidden="true">
      <p class="modal-dialog">
        <p class="modal-content">
        </p>
      </p>
    </p>
  </body>
  <script>
    function modalOut(url) {
      $("#ajax").modal({
        remote: url;
      });
    }
  </script>
</html>

로그인 후 복사

그래서 메인 페이지는 2개의 하위 페이지로 구성되어 있고, 팝업 모달 상자 메소드를 modalOut(url ) 메소드

하위 페이지가 모달 상자를 팝업합니다

하위 페이지가 모달 상자를 팝업해야 하는 경우 상위 페이지에 modalOut(url) 메소드를 로드합니다.

하위 페이지 js는 다음과 같습니다

var _iframe = window.parent;
_iframe.modalOut(&#39;xxx.html&#39;);

로그인 후 복사

위는 하위 페이지의 팝업 모달 상자가 전체 페이지를 덮을 수 없는 문제를 해결한 것입니다.

참고: 따라서 html에는 js가 로드되지 않습니다. 부트스트랩 관련 js는 직접 로드해주세요.

위 내용은 iframe의 상위 페이지에 모달 상자를 팝업하기 위해 부트스트랩을 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

iframe의 상위 페이지에 모달 상자를 팝업하기 위해 부트스트랩을 사용하는 방법에 대한 자세한 설명