フォーム立ち上げ時ポップアップ設置方法

下記フォームサンプルページを元に説明します。
フォームサンプルページをブラウザ上でソースコードをご確認いただくか、ファイルをダウンロードして内容をご確認ください。
＞フォームサンプルページ
＞フォームサンプルダウンロード

※ソースコード確認方法
対象ページをChromeブラウザで開いて下記操作を行ってください。
windows：Ctrl + U
mac：option + command + U

（１）index.html
①画像の設定
②閉じるボタン
③離脱ボタン
④ポップアップ挙動

〈コピペ用コード〉

<!--フォーム立ち上げ時ポップアップ-->
<div id="modal-content">
	<div class="pop">
		<!--画像設置-->
		<img src="images/bnr_popup2.png" alt="">
		<!--ボタン設置-->
		<ul>
			<li><span id="modal-close">ダイエットをやめる</span></li>
			<li><a href="">もう少しだけダイエット<br>を頑張ってみる！！</a></li>
		</ul>
	</div>
</div>

<script>
	$(function () {
		$("body").append('<div id="modal-overlay"></div>');
		$("#modal-overlay,#modal-content").fadeIn("slow");

		//モーダル閉じる
		$("#modal-close").unbind().click(function () {
			$("#modal-content,#modal-overlay").fadeOut("slow", function () {
				$("#modal-overlay").remove();
			});
		});
	});
</script>
<!--フォーム立ち上げ時ポップアップ-->

（２）style.css
738～793行目、
1073～1088行目（@media only screen and (min-width: 640px) ）、

/*=======================================
	modal
=======================================*/
#modal-content {
  width: 90%;
  max-width: 320px;
  margin: 0;
  padding: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 2; }

#modal-overlay {
  z-index: 1;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.75); }

.pop {
  position: relative; }
  .pop ul {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    height: 50px;
    display: flex;
    justify-content: center; }
  .pop li {
    width: 126px;
    margin: 0 4px; }
  .pop a,
  .pop span {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    box-sizing: border-box;
    border-radius: 25px;
    font-size: 10px;
    line-height: 1.4;
    background: #006fe2;
    color: #fff;
    cursor: pointer; }
  .pop span {
    background: #fff;
    color: #bbb;
    border: 1px solid #bbb; }


@media only screen and (min-width: 640px) {

  #modal-content {
    max-width: 450px; }

  .pop ul {
    bottom: 20px;
    height: 70px; }
  .pop li {
    width: 190px;
    margin: 0 6px; }
  .pop a,
  .pop span {
    border-radius: 35px;
    font-size: 15px; }
}

（３）ポップアップバナーの画像をimagesフォルダに格納