teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ポップアップウィンドウを開いたときに指定場所まで移動させるためにはどのようにすればいいでしょうか？

編集履歴

質問編集履歴

9

文法の修正

2019/10/01 03:32

投稿

GIIIG
GIIIG

スコア9

title CHANGED
@@ -1,1 +1,1 @@
1
- ヒアドキュメント内の関数がうまく表示されず、mb_send_mail関数でメール送信した際に表示されない
1
+ ポップアップウィンドウを開いたときに指定場所まで移動させるためにはどのようにすればいいでしょうか？
body CHANGED
@@ -1,149 +1,55 @@
1
+ **初めての投稿なので至らない部分もあると思いますが何卒宜しくお願い致します。**
2
+
1
3
  ### 前提・実現したいこと
2
4
 
3
- **悩み**　
5
+ **悩み**　ポップアップウィンドウを開いたときに指定場所まで移動させるためにはどのようにすればいいでしょうか？
4
6
 
5
- 一部の関数は表示されるが、他の関数がEOM内で表示されておらず
6
- メールを送信した際に特定の関数が真っ白の状態になる。
7
+ actionではただ、ポップアップウィンドウを開くのみ
8
+ action1では、ポップアップウィンドウを起動しh2まで移動させたいです。
7
9
 
8
- ### 発生している問題・エラーメッセージ
10
+ 現状
9
11
 
10
- ```PHP
12
+ action,action1は隣り合うboxなのですが、actionしか起動せず、action1は起動しません。
11
13
 
12
-
13
- if ($_SERVER["REQUEST_METHOD"] == "POST") {
14
+ また、idで同ページジャンプをしようとしますが
14
- // フォームから送信されたデータを各変数に格納
15
+ ポップアップウィンドウを起動してからどのようにすればいいのでしょうか？
15
- $mon = $_POST["mon"];
16
- $day = $_POST["day"];
17
- $free_2 = $_POST["free_2"];
18
- $name = $_POST["name"];
19
- $kana = $_POST["kana"];
20
- $mail = $_POST["_mail"];
21
- }
22
16
 
23
- ```
17
+ ### 発生している問題・エラーメッセージ
24
18
 
19
+ ```Javascript
20
+ <script type="text/javascript">
21
+ $(function(){
22
+ $('.action, action1').click(function(){
23
+ //action,action1で同ポップアップウィンドウを起動
25
- {$name}は表示されるのですが、それ以外が表示されません。
24
+ $('.popup').fadeIn();
25
+ });
26
+ $('.popup-close').click(function(){
27
+ $('.popup').fadeOut();
28
+ });
29
+
30
+ });
26
- また、メール自体も受け取ることはできます。
31
+ </script>
27
- ヒアドキュメントのことは調べましたが、一部の関数が表示されてなぜ他の関数が表示されないのかわかりません。
28
32
 
29
33
 
30
- ```PHP
31
34
 
32
- if (isset($_POST["submit"])) {
33
35
 
34
- mb_language("ja");
36
+ ``````
35
- mb_internal_encoding("UTF-8");
36
37
 
38
+ ```html
39
+ <section class="top">
40
+ <div class="btn top-banner_title action">
41
+ //ポップアップウィンドウ起動
42
+ 　 </div>
43
+ <div class="btn top-banner_title action1">
44
+ 　　//ポップアップウィンドウを起動し、h2まで移動したい
45
+ 　 </div>
46
+ </section>
37
47
 
38
- $mail_to = "********************";
48
+ -----------------------------------------------------
39
49
 
40
- $subject = "［自動送信]";
50
+ <section class-"popup>
51
+ <h1>Title</h1>
52
+ <h2 id="info">Title1</h2>
53
+ </section>
41
54
 
42
- $header = "From: " .mb_encode_mimeheader($fromName) ."<{$fromEmail}>";
43
-
44
-
45
- $body = <<< EOM
46
- 新規お問い合わせ {$name}　様
47
-
48
- 【 ご予約日 】
49
- {$mon}月{$day}日{$free_2}時内容を確認のうえ、回答させて頂きます。
50
-
51
- 【 フリガナ 】
52
- {$kana}
53
-
54
- 【 メールアドレス 】
55
- {$mail}
56
- EOM;
57
-
58
- mb_send_mail($mail_to, $subject, $body, $header);
59
-
60
- header("Location: *************************");
61
- exit;
62
-
63
- ```
64
-
65
-
66
- ```HTML
67
- <form action="confirm.php" method="post" name="form1" onsubmit="return validate()">
68
- <table class="spec">
69
- <tr>
70
- <th width="220">ご予約日</th><th width="20"><span class="red">※</span></th>
71
- <td class="necessary">
72
- <select name="mon" class="validate[required]"><option value="">--</option>
73
- <option value="1">1</option>
74
- <option value="2">2</option>
75
- <option value="3">3</option>
76
- <option value="4">4</option>
77
- <option value="5">5</option>
78
- <option value="6">6</option>
79
- <option value="7">7</option>
80
- <option value="8">8</option>
81
- <option value="9">9</option>
82
- <option value="10">10</option>
83
- <option value="11">11</option>
84
- <option value="12">12</option>
85
- </select> 月　<select name="day" class="validate[required]"><option value="">--</option>
86
- <option value="1">1</option>
87
- <option value="2">2</option>
88
- <option value="3">3</option>
89
- <option value="4">4</option>
90
- <option value="5">5</option>
91
- <option value="6">6</option>
92
- <option value="7">7</option>
93
- <option value="8">8</option>
94
- <option value="9">9</option>
95
- <option value="10">10</option>
96
- <option value="11">11</option>
97
- <option value="12">12</option>
98
- <option value="13">13</option>
99
- <option value="14">14</option>
100
- <option value="15">15</option>
101
- <option value="16">16</option>
102
- <option value="17">17</option>
103
- <option value="18">18</option>
104
- <option value="19">19</option>
105
- <option value="20">20</option>
106
- <option value="21">21</option>
107
- <option value="22">22</option>
108
- <option value="23">23</option>
109
- <option value="24">24</option>
110
- <option value="25">25</option>
111
- <option value="26">26</option>
112
- <option value="27">27</option>
113
- <option value="28">28</option>
114
- <option value="29">29</option>
115
- <option value="30">30</option>
116
- <option value="31">31</option>
117
- </select> 日</td>
118
- </tr>
119
- <tr>
120
- <th>ご予約時間</th><th><span class="red">※</span></th>
121
- <td class="necessary">
122
- <select name="free_2" class="validate[required]">
123
- <option value="">ご予約時間</option>
124
- <option value="10時～">10時～</option>
125
- <option value="11時～">11時～</option>
126
- <option value="12時～">12時～</option>
127
- <option value="13時～">13時～</option>
128
- <option value="14時～">14時～</option>
129
- <option value="15時～">15時～</option>
130
- <option value="16時～">16時～</option>
131
- <option value="17時～">17時～</option>
132
- </select>
133
- </td>
134
- </tr>
135
- <tr>
136
- <th>お名前</th><th><span class="red">※</span></th>
137
- <td class="necessary"><input type="text" name="name" size="30" value="" class="validate[required]"></td>
138
- </tr>
139
- <tr>
140
- <th>フリガナ</th><th><span class="red">※</span></th>
141
- <td class="necessary"><input type="text" name="kana" size="30" value="" class="validate[required]"></td>
142
- </tr>
143
- <tr>
144
- <th>メールアドレス</th><th><span class="red">※</span></th>
145
- <td class="necessary"><input type="text" name="mail" size="30" value="" class="validate[custom[email]]">
146
- </td>
147
- </tr>
148
-
149
55
  ```

8

文法の修正

2019/10/01 03:32

投稿

GIIIG
GIIIG

スコア9

title CHANGED
@@ -1,1 +1,1 @@
1
- JavaScriptでポップアップウィンドウを起動し指定場所までの移動の仕方
1
+ ヒアドキュメント内の関数がうまく表示されず、mb_send_mail関数でメール送信した際に表示されない
body CHANGED
@@ -1,60 +1,149 @@
1
- **初めての投稿なので至らない部分もあると思いますが何卒宜しくお願い致します。**
2
-
3
1
  ### 前提・実現したいこと
4
2
 
5
- **悩み**　つたないコードですいません。
3
+ **悩み**　
6
4
 
5
+ 一部の関数は表示されるが、他の関数がEOM内で表示されておらず
7
- actionは、単純にポップアップウィンドウを起動する。
6
+ メールを送信した際に特定の関数が真っ白の状態になる。
8
7
 
9
- action1は、ポップアップウィンドウを起動し指定idまでのジャンプを実装したいと考えています。
8
+ ### 発生している問題・エラーメッセージ
10
9
 
10
+ ```PHP
11
11
 
12
+
13
+ if ($_SERVER["REQUEST_METHOD"] == "POST") {
14
+ // フォームから送信されたデータを各変数に格納
15
+ $mon = $_POST["mon"];
16
+ $day = $_POST["day"];
17
+ $free_2 = $_POST["free_2"];
18
+ $name = $_POST["name"];
19
+ $kana = $_POST["kana"];
20
+ $mail = $_POST["_mail"];
21
+ }
12
22
 
13
- ポップアップウィンドウを起動しスクロールを行う記述の部分がエラーが表示されます。
23
+ ```
14
24
 
25
+ {$name}は表示されるのですが、それ以外が表示されません。
26
+ また、メール自体も受け取ることはできます。
15
- ポップを表示させ、フェードインさせた後に取得した地点までどのようにすれば移動できますでしょうか？
27
+ ヒアドキュメントのことは調べましたが、一部の関数が表示されてなぜ他の関数が表示されないのかわかりません。
16
28
 
17
- ### 発生している問題・エラーメッセージ
18
29
 
19
- ```javascript
30
+ ```PHP
20
31
 
21
- <script type="text/javascript">
32
+ if (isset($_POST["submit"])) {
22
- $(function(){
23
- $('.action').click(function(){
24
- $('.popup').fadeIn();
25
- });
26
- $('.popup-close').click(function(){
27
- $('.popup').fadeOut();
28
- });
29
33
 
30
- var element = document.getElementById('#info');
34
+ mb_language("ja");
31
- var rect = element.getBoundingClientRect();
35
+ mb_internal_encoding("UTF-8");
32
- var position = rect.top;
36
+
33
- $(function(){
37
+
34
- $('.action1').click(function(){
38
+ $mail_to = "********************";
39
+
35
- $('.popup').fadeIn();
40
+ $subject = "［自動送信]";
41
+
36
- function{
42
+ $header = "From: " .mb_encode_mimeheader($fromName) ."<{$fromEmail}>";
43
+
44
+
37
- scrollTo(0,position);
45
+ $body = <<< EOM
46
+ 新規お問い合わせ {$name}　様
47
+
48
+ 【 ご予約日 】
49
+ {$mon}月{$day}日{$free_2}時内容を確認のうえ、回答させて頂きます。
50
+
51
+ 【 フリガナ 】
38
- }
52
+ {$kana}
53
+
54
+ 【 メールアドレス 】
55
+ {$mail}
39
- });
56
+ EOM;
57
+
58
+ mb_send_mail($mail_to, $subject, $body, $header);
59
+
60
+ header("Location: *************************");
40
- </script>
61
+ exit;
62
+
41
63
  ```
42
64
 
65
+
43
66
  ```HTML
67
+ <form action="confirm.php" method="post" name="form1" onsubmit="return validate()">
44
- <section class="top">
68
+ <table class="spec">
69
+ <tr>
70
+ <th width="220">ご予約日</th><th width="20"><span class="red">※</span></th>
45
- <div class="btn top-banner_title action">
71
+ <td class="necessary">
72
+ <select name="mon" class="validate[required]"><option value="">--</option>
73
+ <option value="1">1</option>
74
+ <option value="2">2</option>
75
+ <option value="3">3</option>
76
+ <option value="4">4</option>
77
+ <option value="5">5</option>
78
+ <option value="6">6</option>
79
+ <option value="7">7</option>
80
+ <option value="8">8</option>
81
+ <option value="9">9</option>
82
+ <option value="10">10</option>
83
+ <option value="11">11</option>
84
+ <option value="12">12</option>
85
+ </select> 月　<select name="day" class="validate[required]"><option value="">--</option>
86
+ <option value="1">1</option>
87
+ <option value="2">2</option>
88
+ <option value="3">3</option>
89
+ <option value="4">4</option>
90
+ <option value="5">5</option>
91
+ <option value="6">6</option>
92
+ <option value="7">7</option>
93
+ <option value="8">8</option>
94
+ <option value="9">9</option>
95
+ <option value="10">10</option>
96
+ <option value="11">11</option>
97
+ <option value="12">12</option>
98
+ <option value="13">13</option>
99
+ <option value="14">14</option>
100
+ <option value="15">15</option>
101
+ <option value="16">16</option>
102
+ <option value="17">17</option>
103
+ <option value="18">18</option>
104
+ <option value="19">19</option>
105
+ <option value="20">20</option>
106
+ <option value="21">21</option>
107
+ <option value="22">22</option>
108
+ <option value="23">23</option>
109
+ <option value="24">24</option>
110
+ <option value="25">25</option>
111
+ <option value="26">26</option>
112
+ <option value="27">27</option>
113
+ <option value="28">28</option>
114
+ <option value="29">29</option>
115
+ <option value="30">30</option>
116
+ <option value="31">31</option>
46
- //ポップアップウィンドウ起動
117
+ </select> 日</td>
47
- 　 </div>
118
+ </tr>
119
+ <tr>
120
+ <th>ご予約時間</th><th><span class="red">※</span></th>
48
- <div class="btn top-banner_title action1">
121
+ <td class="necessary">
122
+ <select name="free_2" class="validate[required]">
123
+ <option value="">ご予約時間</option>
124
+ <option value="10時～">10時～</option>
125
+ <option value="11時～">11時～</option>
126
+ <option value="12時～">12時～</option>
127
+ <option value="13時～">13時～</option>
128
+ <option value="14時～">14時～</option>
129
+ <option value="15時～">15時～</option>
130
+ <option value="16時～">16時～</option>
131
+ <option value="17時～">17時～</option>
49
- 　　//ポップアップウィンドウを起動し、h2まで移動したい
132
+ </select>
50
- 　 </div>
133
+ </td>
51
- </section>
134
+ </tr>
135
+ <tr>
136
+ <th>お名前</th><th><span class="red">※</span></th>
137
+ <td class="necessary"><input type="text" name="name" size="30" value="" class="validate[required]"></td>
138
+ </tr>
139
+ <tr>
140
+ <th>フリガナ</th><th><span class="red">※</span></th>
141
+ <td class="necessary"><input type="text" name="kana" size="30" value="" class="validate[required]"></td>
142
+ </tr>
143
+ <tr>
144
+ <th>メールアドレス</th><th><span class="red">※</span></th>
145
+ <td class="necessary"><input type="text" name="mail" size="30" value="" class="validate[custom[email]]">
146
+ </td>
147
+ </tr>
52
148
 
53
- -----------------------------------------------------
54
-
55
- <section class-"popup>
56
- <h1>Title</h1>
57
- <h2 id="info">Title1</h2>
58
- </section>
59
-
60
149
  ```

7

整理

2019/10/01 03:30

投稿

GIIIG
GIIIG

スコア9

title CHANGED
File without changes
body CHANGED
@@ -4,8 +4,14 @@
4
4
 
5
5
  **悩み**　つたないコードですいません。
6
6
 
7
- ポップアップウィンドウを起動しスクロールを行う記述の部分がうまく書くことができません。
7
+ actionは、単純にポップアップウィンドウを起動する。
8
8
 
9
+ action1は、ポップアップウィンドウを起動し指定idまでのジャンプを実装したいと考えています。
10
+
11
+
12
+
13
+ ポップアップウィンドウを起動しスクロールを行う記述の部分がエラーが表示されます。
14
+
9
15
  ポップを表示させ、フェードインさせた後に取得した地点までどのようにすれば移動できますでしょうか？
10
16
 
11
17
  ### 発生している問題・エラーメッセージ

6

整理

2019/09/18 11:07

投稿

GIIIG
GIIIG

スコア9

title CHANGED
File without changes
body CHANGED
@@ -34,10 +34,7 @@
34
34
  </script>
35
35
  ```
36
36
 
37
- ```Javascript
38
-
39
-
40
- ```html
37
+ ```HTML
41
38
  <section class="top">
42
39
  <div class="btn top-banner_title action">
43
40
  //ポップアップウィンドウ起動

5

整理

2019/09/18 11:04

投稿

GIIIG
GIIIG

スコア9

title CHANGED
File without changes
body CHANGED
@@ -2,57 +2,41 @@
2
2
 
3
3
  ### 前提・実現したいこと
4
4
 
5
- **悩み**　ポップアップウィンドウを開いたときに指定場所まで移動させるためにはどのようにすればいいでしょうか？
5
+ **悩み**　つたないコードですいません。
6
6
 
7
- actionではただ、ポップアップウィンドウを開くのみ
8
- action1では、ポップアップウィンドウを起動しh2まで移動させたいです。
7
+ ポップアップウィンドウを起動しスクロールを行う記述の部分がうまく書くことができません。
9
8
 
10
- 現状
9
+ ポップを表示させ、フェードインさせた後に取得した地点までどのようにすれば移動できますでしょうか？
11
10
 
12
- action,action1は隣り合うboxなのですが、actionしか起動せず、action1は起動しません。
11
+ ### 発生している問題・エラーメッセージ
13
12
 
14
- また、idで同ページジャンプをしようとしますが
13
+ ```javascript
15
- ポップアップウィンドウを起動してからどのようにすればいいのでしょうか？
16
14
 
17
- ### 発生している問題・エラーメッセージ
18
-
19
- ```Javascript
20
- <script type="text/javascript">
15
+ <script type="text/javascript">
21
16
  $(function(){
22
- $('.action, action1').click(function(){
17
+ $('.action').click(function(){
23
- //action,action1で同ポップアップウィンドウを起動
24
18
  $('.popup').fadeIn();
25
19
  });
26
20
  $('.popup-close').click(function(){
27
21
  $('.popup').fadeOut();
28
22
  });
29
-
30
- });
31
- </script>
32
23
 
33
-
34
-
35
-
36
- ``````
37
-
38
- ```Javascript
39
-
40
- //ポップアップウィンドウ全文　追記
41
-
42
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
24
+ var element = document.getElementById('#info');
43
- <script type="text/javascript">
25
+ var rect = element.getBoundingClientRect();
26
+ var position = rect.top;
44
27
  $(function(){
45
- $('.action, .action1').click(function(){
28
+ $('.action1').click(function(){
46
29
  $('.popup').fadeIn();
30
+ function{
31
+ scrollTo(0,position);
32
+ }
47
33
  });
48
- $('.popup-close').click(function(){
49
- $('.popup').fadeOut();
50
- });
51
- });
52
34
  </script>
53
- ``````
35
+ ```
54
36
 
37
+ ```Javascript
55
38
 
39
+
56
40
  ```html
57
41
  <section class="top">
58
42
  <div class="btn top-banner_title action">
@@ -70,36 +54,4 @@
70
54
  <h2 id="info">Title1</h2>
71
55
  </section>
72
56
 
73
- ```
74
-
75
-
76
- つたないコードですいません。なんとか移動させる方法は分かったのですが、
77
-
78
- ポップアップウィンドウを起動しスクロールを行う記述の部分がうまく書くことができません。
79
-
80
- ポップを表示させ、フェードインさせた後に取得した地点までどのようにすれば移動できますでしょうか？
81
-
82
-
83
- ```javascript
84
-
85
- <script type="text/javascript">
86
- $(function(){
87
- $('.action').click(function(){
88
- $('.popup').fadeIn();
89
- });
90
- $('.popup-close').click(function(){
91
- $('.popup').fadeOut();
92
- });
93
-
94
- var element = document.getElementById('#info');
95
- var rect = element.getBoundingClientRect();
96
- var position = rect.top;
97
- $(function(){
98
- $('.action1').click(function(){
99
- $('.popup').fadeIn();
100
- function{
101
- scrollTo(0,position);
102
- }
103
- });
104
- </script>
105
57
  ```

4

誤字

2019/09/18 11:02

投稿

GIIIG
GIIIG

スコア9

title CHANGED
File without changes
body CHANGED
@@ -77,7 +77,7 @@
77
77
 
78
78
  ポップアップウィンドウを起動しスクロールを行う記述の部分がうまく書くことができません。
79
79
 
80
- ポップを表示させ、ェードインさせた後に取得した地点までどのようにすれば移動できますでしょうか？
80
+ ポップを表示させ、フェードインさせた後に取得した地点までどのようにすれば移動できますでしょうか？
81
81
 
82
82
 
83
83
  ```javascript

3

誤字

2019/09/18 10:54

投稿

GIIIG
GIIIG

スコア9

title CHANGED
File without changes
body CHANGED
@@ -73,7 +73,7 @@
73
73
  ```
74
74
 
75
75
 
76
- つたないこーどですいません。なんとか移動させる方法は分かったのですが、
76
+ つたないコードですいません。なんとか移動させる方法は分かったのですが、
77
77
 
78
78
  ポップアップウィンドウを起動しスクロールを行う記述の部分がうまく書くことができません。
79
79
 

2

位置を取得するところまで少し自己解決

2019/09/18 10:53

投稿

GIIIG
GIIIG

スコア9

title CHANGED
File without changes
body CHANGED
@@ -70,4 +70,36 @@
70
70
  <h2 id="info">Title1</h2>
71
71
  </section>
72
72
 
73
+ ```
74
+
75
+
76
+ つたないこーどですいません。なんとか移動させる方法は分かったのですが、
77
+
78
+ ポップアップウィンドウを起動しスクロールを行う記述の部分がうまく書くことができません。
79
+
80
+ ポップを表示させ、ェードインさせた後に取得した地点までどのようにすれば移動できますでしょうか？
81
+
82
+
83
+ ```javascript
84
+
85
+ <script type="text/javascript">
86
+ $(function(){
87
+ $('.action').click(function(){
88
+ $('.popup').fadeIn();
89
+ });
90
+ $('.popup-close').click(function(){
91
+ $('.popup').fadeOut();
92
+ });
93
+
94
+ var element = document.getElementById('#info');
95
+ var rect = element.getBoundingClientRect();
96
+ var position = rect.top;
97
+ $(function(){
98
+ $('.action1').click(function(){
99
+ $('.popup').fadeIn();
100
+ function{
101
+ scrollTo(0,position);
102
+ }
103
+ });
104
+ </script>
73
105
  ```

1

ポップアップウィンドウの全文を記載

2019/09/18 10:53

投稿

GIIIG
GIIIG

スコア9

title CHANGED
File without changes
body CHANGED
@@ -35,6 +35,24 @@
35
35
 
36
36
  ``````
37
37
 
38
+ ```Javascript
39
+
40
+ //ポップアップウィンドウ全文　追記
41
+
42
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
43
+ <script type="text/javascript">
44
+ $(function(){
45
+ $('.action, .action1').click(function(){
46
+ $('.popup').fadeIn();
47
+ });
48
+ $('.popup-close').click(function(){
49
+ $('.popup').fadeOut();
50
+ });
51
+ });
52
+ </script>
53
+ ``````
54
+
55
+
38
56
  ```html
39
57
  <section class="top">
40
58
  <div class="btn top-banner_title action">