ポップアップで出現する画像のコードを書いているのですが、出現する画像が中央配置になりません。1300pxの画面では真ん中に見える画像でも、600pxの画面で観覧すると、中央配置にならないです。javascriptはちゃんと起動します。
text-align: center; margin 0 autoを追加しても中央配置になりません。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>ポップアップ</title> 6 7 <meta name="viewport" content="width=device-width,initial-scale=1"> 8 9 <style> 10 11 12 .wrapper { 13 overflow: hidden; 14 15 } 16 .popup { 17 18 left: 0; 19 top: 0; 20 width: 100%; 21 height: 100%; 22 z-index: 9999; 23 opacity: 0; 24 visibility: hidden; 25 transition: .6s; 26} 27.popup.is-show { 28 opacity: 1; 29 visibility: visible; 30} 31/* 表示画像のスタイル */ 32.popup-inner { 33 34 text-align: center; 35 36 width: 90%; 37 height: 90%; 38 39 40 padding: 70px; 41 background-color: rgb(49, 194, 239); 42 z-index: 2; 43} 44/* 表示画像のスタイル */ 45.popup-inner img { 46 width: 100%; 47 48 49} 50/* 閉じボタンをクリックすると閉じるイベントを発動する領域(✖ボタンの部分に領域してい */ 51.close-btn { 52 position: absolute; 53 right: 0; 54 top: 0; 55 width: 50px; 56 height: 50px; 57 line-height: 50px; 58 text-align: center; 59 cursor: pointer; 60} 61/* 閉じボタンのスタイル */ 62.close-btn i { 63 font-size: 20px;/* 閉じボタンの大きさ */ 64 color: #333;/* 閉じボタンの色 */ 65} 66/* 閉じボタンのスタイル */ 67.close-btn1 { 68 position: absolute; 69 right: 0; 70 top: 0; 71 width: 50px; 72 height: 50px; 73 border-radius: 50%; 74 line-height: 50px; 75 font-size: 20px; 76 font-weight: bold; 77 cursor: pointer; 78} 79 80 81 82img.examplepopwindow001{ 83 84 85 height: 260px; 86 width: 64%; 87 margin-bottom: -1px;/* 下余白vertical-align: bottom;効かない */ 88 89} 90 </style> 91</head> 92<body> 93 94<div class="wrapper"> 95 96 <div class="popup" id="js-popup"> 97 <div class="popup-inner"> 98 <div id="close-btn1" class="close-btn1">✖</div> 99 <div class="close-btn" id="js-close-btn"><i class="fas fa-times"></i></div> 100 <img src="image2/600.png" alt="ポップアップ画像" class=" examplepopwindow001"> 101 </div> 102 <div class="black-background" id="js-black-bg"></div> 103 </div> 104 105 106 107 108<script> 109 110window.onload = function() { 111 var popup = document.getElementById('js-popup'); 112 if(!popup) return; 113 popup.classList.add('is-show'); 114 115 116 117 var blackBg = document.getElementById('js-black-bg'); 118 var closeBtn = document.getElementById('js-close-btn'); 119 120 closePopUp(blackBg); 121 closePopUp(closeBtn); 122 123 124 function closePopUp(elem) { 125 if(!elem) return; 126 elem.addEventListener('click', function() { 127 popup.classList.remove('is-show'); 128 }) 129 } 130} 131 132</script> 133</div> 134</body> 135</html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/05/30 06:59