モーダルウインドウ

モーダルウインドウの閉じるボタンを表示ウインドウの右の外へ出したいのですがうまく出せません。
色々書いてみたんですがpositionの使い方などがよくわからず、うまく活用できず画面右に寄ったりして思い通りに行きません。
理想としては、Twitterの画像などをクリックした時に表示する閉じるボタンのようにしたいんですが・・・・

httl
1  <section id="modalwindow">
2      <div id="open" class="btn">
3        ログイン <br> or <br> 新規登録
4      </div>
5
6      <div id="mask" class="hidden"></div>
7
8
9      <div id="window" class="hidden">
10        <div id="close" class="hidden">☓ 閉じる</div>
11        <div id="box">
12          <form action="" method="post" id="login">
13            <p>
14              <input type="text" name="email" placeholder="email" value="<?= isset($app->getValues()->email) ? h($app->getValues()->email) : ''; ?>">
15            </p>
16            <p>
17              <input type="password" name="password" placeholder="password">
18            </p>
19            <p class="err"><?= h($app->getErrors('login')); ?></p>
20            <div class="btn" onclick="document.getElementById('login').submit();">Log In</div>
21            <p class="fs12"><a href="/signup.php">Sign Up</a></p>
22            <input type="hidden" name="token" value="<?= h($_SESSION['token']); ?>">
23          </form>
24        </div>
25      </div>
26    </section>

css
1#mask{
2  background: rgba(0, 0, 0, 0.4);
3  position: fixed;
4  top: 0;
5  bottom: 0;
6  right: 0;
7  left: 0;
8}
9
10#window{
11  background: #fff;
12  width: 400px;
13  padding: 20px;
14  border-radius: 4px;
15  position: absolute;
16  top: 0 auto;
17  left: 0;
18  right: 0;
19  margin: 0 auto;
20  transition: .8s;
21}
22#close{
23  float: right;
24}
25
26 #mask.hidden{
27   display: none;
28 }
29
30 #window.hidden{
31   /*  要素の移動(x , y) */
32   transform: translate(0, -2000px);
33 }

現在は理想に一番近いようにfloatで右に寄せています。
アドバイスなどでもお願いします。

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

回答1件

ベストアンサー

このように行うと質問者さんの実現したいことができると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        #mask {
13            background: rgba(0, 0, 0, 0.4);
14            position: fixed;
15            top: 0;
16            bottom: 0;
17            right: 0;
18            left: 0;
19        }
20
21        #window {
22            width: 400px;
23            padding: 20px;
24            border-radius: 4px;
25            position: absolute;
26            top: 0;
27            left: 0;
28            right: 0;
29            margin: 0 auto;
30            transition: .8s;
31        }
32
33        #close {
34            /* ここから */
35            position: absolute;
36            right: -4em;
37            /* ここまで */
38        }
39
40        #mask.hidden {
41            display: none;
42        }
43
44        #window.hidden {
45            /*  要素の移動(x , y) */
46            transform: translate(0, 0px);
47        }
48    </style>
49</head>
50<body>
51<section id="modalwindow">
52    <div id="open" class="btn">
53        ログイン <br> or <br> 新規登録
54    </div>
55    <div id="mask" class="hidden"></div>
56    <div id="window" class="hidden">
57        <div id="close" class="hidden">☓ 閉じる</div>
58        <div id="box">
59            <form action="" method="post" id="login">
60                <p>
61                    <input type="text" name="email" placeholder="email"
62                           value="<?= isset($app->getValues()->email) ? h($app->getValues()->email) : ''; ?>">
63                </p>
64                <p>
65                    <input type="password" name="password" placeholder="password">
66                </p>
67                <p class="err"><?= h($app->getErrors('login')); ?></p>
68                <div class="btn" onclick="document.getElementById('login').submit();">Log In</div>
69                <p class="fs12"><a href="/signup.php">Sign Up</a></p>
70                <input type="hidden" name="token" value="<?= h($_SESSION['token']); ?>">
71            </form>
72        </div>
73    </div>
74</section>
75</body>
76</html>