インラインフレームの書き方

インラインフレームは外部サイトや別のwebページを自身のサイトにそのまま埋め込むことができる。
例えば、一覧画面から登録画面に遷移する際に登録画面を一覧画面のURLのままインランフレームで表示させるなど。
Twitterやfacebookのタイムラインを埋め込むこともできます。

<!-- フォーム部分 -->
<form name="form1" action="user_edit_done.php" target="scheduleIframe" method="post">
<!-- フォームのactionで飛び先のurlを指定するのは通常通り。
     targetで送信結果をどのインラインフレーム（ウィンドウ）に表示するのかを指定するため、
     iframeタグのnameを指定します。このコードだと「scheduleIframe」。 -->
 <?php
  echo '<input type="hidden" name="code" value="'. $hoge . '">';
  echo '<input type="hidden" name="position" value="'. $hogehoge . '">';
  echo '<input type="hidden" name="first_name" value="'. $fuga . '">';
 ?>

<!-- 送信ボタン -->
 <div class="button">
  <input type="button" onclick="history.back()" value="戻る" class="back_button">
  <input type="submit" value="登録" class="edit_button edit" onclick="dispIframe()">
 </div>
</form>
<!-- inputタブのonclickでdispIframeを設定し、jQueryで書いたモーダルウィンドウのコードを動かします。
     ここまででform部分終了。 -->

<!-- インラインフレームのコードです -->
<div class="schedule-modal" id="js-schedule-modal">
 <div class="schedule-modal-inner">
  <iframe id="iframe" name="scheduleIframe" frameborder="0"></iframe>
  <button class="close-btn-comp" id="js-close-btn" onclick="location.href='user_list.php'">一覧に戻る</button>
 </div>
 <div class="overlay" id="js-overlay"></div>
</div>
<!-- class="schedule-modal" をcssをdisplay:noneにして全体を表示にしています。
     送信ボタンがクリックされることでonclick="dispIframe()"が作動し一番上のid="js-schedule-modal"を
     下のjQueryのコードで指定しモーダルウィンドウにします。
     buttonタグ class="close-btn-comp"では、onclickで一つまえのページに戻る指定をしています。
     下から２行目のdiv class="overlay" id="js-overlay"でモーダルウィンドウが出た際に外枠を黒っぽく表示します。 -->

<!-- jqueryのリンク -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- jQueryのコード -->
<script type="text/javascript">
 function dispIframe() {
  $("#js-schedule-modal").css('display', 'block');
};
//送信ボタンがクリックされた際にonclickで function dispIframe が発動。インラインフレームの
//id="js-schedule-modal" を指定し、cssをdisplay,blockにしモーダルウィンドウで出現させます。

  $("#js-close-btn, #js-overlay").on("click", function() {
  $("#js-schedule-modal").css('display', 'none');
 });
//js-close-btnはインラインフレーム内の「一覧に戻るボタン」、js-overlayはインラインフレーム外の黒っぽくなっている外枠、
//この二つをクリックすることでサイドjs-schedule-modalのcssをdisplay,noneにし、インラインフレームを表示にします。

/* 各CSSです */

.schedule-modal {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: 1s;
    z-index: 999;
}

.schedule-modal-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 999;
    transform: translate(-50%, -50%);
    width: 30%;
    height: 45%;
    box-sizing: border-box;
    padding: .3rem;
    border-radius: .8rem;
    background: #fff;
}

.schedule-modal iframe {
    width: 100%;
    height: 90%;
}

.close-btn {
    position: absolute;
    top: 60%;
    font-size: 2rem;
    padding: 0 .6rem .1rem;
    border: 1px solid #bfbcb0;
    border-radius: 3px;
    background: linear-gradient(#fcfcfa, #e5e3d8);
    cursor: pointer;
    left: 30%;
}

.overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: 900;
    cursor: pointer;
}