XAMPP使用時にモーダルウィンドウがはたらかないこと

前提・実現したいこと

フォームへの回答確認をモーダルウィンドウで行い、良いならそのまま送信、ダメなら閉じて修正するものを作ろうとしています。
尚このページのファイルはHTMLであり、モーダルウィンドウの作成はHTML、jQuery、CSSを用いて行います。

発生している問題・エラーメッセージ

フォームのHTMLファイルを開く場合直接ダブルクリックで開いた場合(ファイルプロトコル使用時)は
何の問題なく作動する(モーダルウィンドウは最初は非表示だがボタンを押して出てきて枠外かボタンをクリックで閉じる)のですが
localhost経由で開くとモーダルウィンドウの中身が既に出ている状態で出てきます。
また、localhost経由で開いた場合のみ

Resource interpreted as Stylesheet but transferred with MIME type text/html:

と出ます。

該当のソースコード

JS
1$(function() {
2
3var $window = $(window),
4    $html = $('html'),
5    $body = $('body'),
6    $overlay = $('#modal-overlay'),
7    scrollbar_width = window.innerWidth - document.body.scrollWidth,
8    touch_start_y;
9
10// タッチしたとき開始位置を保存しておく
11$window.on('touchstart', function(event) {
12  touch_start_y = event.originalEvent.changedTouches[0].screenY;
13});
14
15// 確認ボタンをクリック
16$('#is_it_OK').on('click', function() {
17  // スワイプしているとき
18//if (valid_all($att_,$asses,$demand,$other)===true) {
19  $window.on('touchmove.noscroll', function(event) {
20    var overlay = $overlay[0],
21        current_y = event.originalEvent.changedTouches[0].screenY,
22        height = $overlay.outerHeight(),
23        is_top = touch_start_y <= current_y && overlay.scrollTop === 0,
24        is_bottom = touch_start_y >= current_y && overlay.scrollHeight - overlay.scrollTop === height;
25    
26    // スクロール対応モーダルの上端または下端のとき
27    if (is_top || is_bottom) {
28      // スクロール禁止
29      event.preventDefault();
30    }
31  });
32  
33  $('html, body').css('overflow', 'hidden');
34  
35  if (scrollbar_width) {
36    $html.css('padding-right', scrollbar_width);
37  }
38  
39  // モーダルをフェードイン
40  $overlay.fadeIn(300);
41//}
42});
43
44// モーダルを閉じる処理
45var closeModal = function() {
46  // overflow: hidden; と padding-right を消す
47  $body.removeAttr('style');
48  
49  // イベントを削除
50  $window.off('touchmove.noscroll');
51  
52  // モーダルをフェードアウト
53  $overlay.animate({
54    opacity: 0
55  }, 300, function() {
56    // モーダルを一番上にスクロールしておく
57    $overlay.scrollTop(0).hide().removeAttr('style');
58    // overflow: hidden を消す
59    $html.removeAttr('style');
60  });
61};
62
63// オーバーレイをクリック
64$overlay.on('click', function(event) {
65  // モーダルの領域外をクリックで閉じる
66  if (!$(event.target).closest('#modal').length) {
67    closeModal();
68  }
69});
70
71// 閉じるボタンクリックでモーダルを閉じる
72$('#modal-close').on('click', function() {
73  closeModal();
74});
75
76});

HTML
1<html>
2<head>
3    <link rel="stylesheet" type="text/css" href="modal.css">
4    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>アンケート</title></head>
7<body>
8<!--フォームの内容。-->
9<div class="final_check " id="final_check"><p><input type="button" value="check" id="is_it_OK"></p></div>
10<div id="modal-overlay">
11<div class="container">
12<div id="modal">
13    <p>0:<span class="a0"></span></p>
14  <p>1:<span class="a1"></span></p>
15  <p>2:<span class="a2"></span></p>
16  <p>3:<span class="a3"></span></p>
17  <p>4:<span class="a4"></span></p>
18  <p>5:<span class="a5"></span></p>
19  <p>6:<span class="a6"></span></p>
20  <p>7:<span class="a7"></span></p>
21  <p>8:<span class="a8"></span></p>
22  <p>9:<span class="a9"></span></p>
23  <p>10:<span class="a10"></span></p>
24  <p>11:<span class="a11"></span></p>
25  <p>12:<span class="a12"></span></p>
26  <p>13:<span class="a13"></span></p>
27  <p>14:<span class="a14"></span></p>
28  <p>15:<span class="a15"></span></p>
29  <p>16:<span class="a16"></span></p>
30  <p>17:<span class="a17"></span></p>
31  <p>18:<span class="a18"></span></p>
32  <p>19:<span class="a19"></span></p>
33  <p>20:<span class="a20"></span></p>
34  <p>21:<span class="a21"></span></p>
35  <p>22:<span class="a22"></span></p>
36  <p>23:<span class="a23"></span></p>
37  <p>24:<span class="a24"></span></p>
38  <p>25:<span class="a25"></span></p>
39  <p>26:<span class="a26"></span></p>
40  <p>これでよろしければ"Send"ボタンを押して下さい。修正の必要があるならば"close"ボタンを押してフォームの中身を修正して下さい。</p>
41  <p><input type="button" id="modal-close" value="close"></p></p><p><input type="button" id="submit" value="Send"></p>
42</div>
43</div>
44</div>
45<!--モーダルウィンドウはmodal-overlay以外のdiv要素の中身ではない-->
46</body>
47</html>
48

CSS
1    body {
2      padding: 0 15px;
3      -webkit-font-smoothing: antialiased;
4      -moz-osx-font-smoothing: grayscale;
5      -ms-text-size-adjust: 100%;
6      -webkit-text-size-adjust: 100%;
7    }
8    #modal-overlay {
9      display: none;
10      position: fixed;
11      top: -10px;
12      left: 0;
13      right: 0;
14      bottom: -10px;
15      background-color: rgba(0, 0, 0, .45);
16      overflow: hidden;
17      overflow-y: auto;
18      -webkit-overflow-scrolling: touch;
19      -webkit-backface-visibility: hidden;
20      backface-visibility: hidden;
21    }
22
23    #modal {
24      margin: 0 auto;
25      padding: 1.9em 2em;
26      max-width: 550px;
27      text-align: justify;
28      text-justify: inter-ideograph;
29      border-radius: 7px;
30      background-color: #fff;
31      box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
32    }
33

補足情報（FW/ツールのバージョンなど）

XAMPP:最新版

退会済みユーザー

2018/08/22 02:54 編集

これだけの情報で第三者が同じ現象を再現できると思うの？そして、その原因をXAMPPだからっていうのもどうかと思うよ。

行動規範の内容に同意します

回答1件

モーダルはあくまでクライアントサイドだけの仕組みなのでWebサーバーの操作ツールであるXAMPPは一切関係ないですよ。
単に必要なjsやCSSファイルが正しく読み込めてないだけではないでしょうか。

投稿2018/08/22 03:00

m.ts10806

総合スコア80850

penginer

2018/08/22 03:15

ただ、ファイルプロトコルとXAMPP上で開いているファイルは全く同じもの (同じタイミングで更新済み)であり、その開き方(ファイルプロトコルかXAMPP上か)によって表示に差が出てしまっているので正直私にもよくわからない状況ですまた、コンソール上にもエラーは出ていません。

m.ts10806

2018/08/22 04:06

ですから、この提示内容だけでは想像するしかないんですよ。読み込み含めたHTML全部と、階層構造が分かる情報を出してください。出来なければ自身で確認するしかないです。読み込めてなければブラウザ開発ツールのコンソールにエラーが出てるはずなので。ひとまずXAMPPが全く関係ないのは事実です。財布持たずにタクシー乗って、タクシーのせいにできますか？

行動規範の内容に同意します