モーダルウィンドウのＸボタンについて

モーダルウィンドウの中央に画像を表示させ、
その右上の角にＸボタンを表示しようとしています（白い背景のコンテナの右上）

しかし、画像を中央揃え（ margin: 0 auto ）にするとＸボタンが下に落ちてしまいます

画像を左揃えにして、画像コンテナに float: left;
Ｘボタンに float: right; とすると上手く左右に分かれます

※幅が足りないから落ちているんだと思いますが、
「画像は中央揃え」「Ｘボタンは右上」にするにはどうすれば良いでしょうか

html
1<div id="modal" class="modal">
2  <div class="modal-content"><!-- これに背景白が設定してあります -->
3    <div class="modal-body">
4        <div id="pict-container"><img src=""></div>
5        <a href="#" class="xbtn">Ｘ</a>
6    </div>
7  </div>
8</div>

css
1.modal {
2display: none;
3position: fixed;
4z-index: 1;
5left: 0;
6top: 0;
7height: 100%;
8width: 100%;
9overflow: auto;
10background-color: rgba(0,0,0,0.5);
11
12}
13.modal-content{
14background-color: white;
15width: 80%;/*500px;*/
16height: 90%;/*300px;*/
17margin: 0 auto;
18
19}
20#pict-container {
21background: red;
22margin: 0 auto;
23/* float: left;*/
24}
25.xbtn {
26  display: inline-block;
27  padding: 0.3em 1em;
28  text-decoration: none;
29  color: #67c5ff;
30  border: solid 2px #67c5ff;
31  border-radius: 3px;
32  transition: .4s;
33margin 0 0 auto auto;
34/*float: right;*/
35}

JavaScript
1(function() {
2var picts = document.querySelectorAll('.gallery');
3var srcs = Array.from(picts).map(function(pict) {
4  return pict.parentNode.href;
5});
6
7var modal = document.querySelector('#modal');
8var modalContent = document.querySelectorAll('.modal-content')[0];
9var pictContainer = document.querySelector('#pict-container');
10var xBtn = document.querySelectorAll(".xbtn")[0];
11
12xBtn.addEventListener('click', function(e) {
13  e.preventDefault();
14  modal.style.display = 'none';
15});
16
17picts.forEach(function(pict) {
18  pict.addEventListener('click', function(e) {
19    e.preventDefault();
20    var aEle = e.target.parentNode;
21//    modal.style.display = 'block';
22    modal.style.display = 'flex';
23    modal.style.justifyConten = 'center';
24    modal.style.alignItems = 'center';
25    pictContainer.style.width = "80%";
26    pictContainer.style.height = "90%";
27    pictContainer.firstChild.src = aEle.href;
28
29    pictContainer.firstChild.height = window.innerHeight * 0.9;
30    pictContainer.firstChild.width = pictContainer.firstChild.height * 1.31;
31    pictContainer.style.textAlign = 'center';
32
33pictContainer.addEventListener('click', function(e) {
34    var idx = srcs.indexOf(pictContainer.firstChild.src);
35    pictContainer.firstChild.src = (srcs[idx + 1]) ? srcs[idx + 1] : srcs[0];
36});
37//    modalContent.width = pictContainer.firstChild.width;
38//    modalContent.height = pictContainer.firstChild.height;
39
40  });
41});
42
43window.addEventListener('click', function(e) {
44  if (e.target === modal) {
45    modal.style.display = 'none';
46  }
47});
48})();

azuapricot

2019/11/11 06:16

このコードで事象が再現できますか？できるだけモーダルが表示できるコードをご提示ください

azuapricot

2019/11/11 06:17

(display:none が設定されてるから普通に使うだけじゃ見えなかった）

soda346

2019/11/11 06:50

済みません JSコードを追加しました（画像をクリックしたら次の画像を表示するようになっています）

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

回答1件

ベストアンサー

それっぽくはなった気がするのであとはご自分で調節してほしいところです

CSS
1.modal-body {
2  height:100%; /* モーダル分の高さを記述 */
3  position:relative; /* 親要素に設定（Xボタンの基準にする) */
4}
5
6#pict-container {
7  display:flex; /* Flex要素にする */
8  justify-content:center; /* 横方向中央寄せ */
9  align-items: center; /*縦方向中央寄せ*/
10  height:100%;
11}
12.xbtn {
13  display: inline-block;
14  padding: 0.3em 1em;
15  text-decoration: none;
16  color: #67c5ff;
17  border: solid 2px #67c5ff;
18  border-radius: 3px;
19  transition: .4s;
20  margin 0 0 auto auto;
21
22  position:absolute; /* position:relativeを設定した親要素を元に絶対位置を決める */
23  top:0; /*親要素の上に位置を合わせる*/
24  right:0;  /*親要素の右に位置を合わせる*/
25}