私はこのCSSに問題があります

Question

私はモーダルを作りたいと思っており、同じ行にツールと閉じるボタンを作成するのに苦労しています。これは、下の画像のようにする必要があります：

var modal = document.getElementById('myModal'); 
 
var btn = document.getElementById("myBtn"); 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
} 
 

 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
}

.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
} 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 15% auto; 
 
    border: 1px solid #888; 
 
    width: 100px; 
 
    box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61); 
 
} 
 

 
.cButton { 
 
    position: realtive; 
 
    display: inline-block; 
 
    background-color: grey; 
 
    width: 100px; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.close { 
 
    position: absolute; 
 
    display: inline; 
 
    color: #aaa; 
 
    float: right; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: black; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<div id="myBtn">Open Modal</div> 
 
<div id="myModal" class="modal"> 
 
    <div class="modal-content"> 
 
    <div id="closeButton" class="cButton"> 
 
     <p>tools</p> 
 
     <div class="close">&times;</div> 
 
    </div> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    </div> 
 

 
</div>

そしてまた、私は、モーダルボックスの上部は、下の画像のようなスタイルを持っていると思います。

Answer 1

あなたはまた、.closeクラスからposition:absoluteを削除することができ.cButtonクラス

.cButton { 
    /*rest of code*/ 
    display:flex; 
    align-items: center; 
    justify-content: space-between; 
} 

にdisplay:flexを追加します。

三角形については、border-left, border-right, border-bottomを使用して作成できます。 I以下のスニペットで

例えばスニペットを確認

var modal = document.getElementById('myModal'); 
 
var btn = document.getElementById("myBtn"); 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
} 
 

 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
}

.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
} 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 15% auto; 
 
    border: 1px solid #888; 
 
    width: 200px; 
 
    box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61); 
 
} 
 

 
.cButton { 
 
    position: relative; 
 
    background-color: grey; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: space-between; 
 
} 
 

 
.cButton:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 0px; 
 
    height: 0px; 
 
    right: 25px; 
 
    top: -15px; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    border-bottom: 15px solid #000; 
 
} 
 

 
.close { 
 
    color: #aaa; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    padding-right: 10px; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: black; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<div id="myBtn">Open Modal</div> 
 
<div id="myModal" class="modal"> 
 
    <div class="modal-content"> 
 
    <div id="closeButton" class="cButton"> 
 
     <p>tools</p> 
 
     <div class="close">&times;</div> 
 
    </div> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    </div> 
 

 
</div>

Answer 2

.modal { 
    display: none; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
} 

.modal-content { 
    background-color: #fefefe; 
    margin: 15% auto; 
    border: 1px solid #888; 
    width: 100px; 
    box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61); 
} 

.cButton { 
    position: relative; 
    display: inline-block; 
    background-color: #f7f7f7; 
    width: 100px; 
    border-top: 1px solid #f7f7f7; 
    border-bottom: 1px solid #f7f7f7; 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
    text-indent:5px; 
} 

.close { 
     position: absolute; 
    display: inline; 
    color: #aaa; 
    font-size: 20px; 
    font-weight: bold; 
    top: 13px; 
    right: 8px; 
} 

.close:hover, 
.close:focus { 
    color: black; 
    text-decoration: none; 
    cursor: pointer; 
} 

だけuが期待されます結果

Answer 3

をCSSを交換し、私はそれを素早く試しを与えました。

閉じるボタンは既に絶対位置に配置されていましたが、tob/bottom/left/rightの値はありません。 cButtonクラスの入力ミス（position: realtive;）もありました。

頂点の三角形は、css三角形（https://css-tricks.com/examples/ShapesOfCSS/参照）を使用して、モーダルコンテナのbeforeとafter要素で作成されます。 ）

tob/bottom/left/right CSS属性を使用してモーダルを配置し、モーダルのtransform属性でオフセットを調整することができます。また、オフセットを調整することもできます。

var modal = document.getElementById('myModal'); 
 
var btn = document.getElementById("myBtn"); 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
btn.onclick = function(e) { 
 
    modal.style.display = "block"; 
 
    modal.style.top = e.clientY+'px'; 
 
    modal.style.left = e.clientX+'px'; 
 
} 
 

 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
}

.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
    transform: translateY(12px); 
 
} 
 

 
.modal::before { 
 
    content: ''; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 17px solid transparent; 
 
    border-right: 17px solid transparent; 
 
    border-bottom: 12px solid #55f; 
 
    position: absolute; 
 
    top: -11px; 
 
    left: 0; 
 
} 
 
.modal::after { 
 
    content: ''; 
 
    display: block; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 15px solid transparent; 
 
    border-right: 15px solid transparent; 
 
    border-bottom: 10px solid white; 
 
    position: absolute; 
 
    top: -10px; 
 
    left: 2px; 
 
} 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    border: 1px solid #888; 
 
    width: 100px; 
 
    box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61); 
 
} 
 

 
.cButton { 
 
    position: relative; 
 
    display: inline-block; 
 
    background-color: grey; 
 
    width: 100px; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.close { 
 
    position: absolute; 
 
    display: inline; 
 
    color: #aaa; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    top: 17px; 
 
    right:4px; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: black; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<div id="myBtn">Open Modal</div> 
 
<div id="myModal" class="modal"> 
 
    <div class="modal-content"> 
 
    <div id="closeButton" class="cButton"> 
 
     <p>tools</p> 
 
     <div class="close">&times;</div> 
 
    </div> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    </div> 
 

 
</div>

Answer 4

あなたは文句を言わないことを必要とするので、絶対位置を削除しました。それはインラインで完全に動作します。ここでの問題は、あなたのpタグがブロック要素だったので、クラスを追加してスタイリングすることでそのインラインを作りました。以下のスニペットを参照してください。

閉じるボタンからpを削除することも考えられます。なぜなら、それがその一部になりたいかどうかわからないからです。

幸運。

var modal = document.getElementById('myModal'); 
 
var btn = document.getElementById("myBtn"); 
 
var span = document.getElementsByClassName("close")[0]; 
 

 
btn.onclick = function() { 
 
    modal.style.display = "block"; 
 
} 
 

 
span.onclick = function() { 
 
    modal.style.display = "none"; 
 
} 
 

 
window.onclick = function(event) { 
 
    if (event.target == modal) { 
 
    modal.style.display = "none"; 
 
    } 
 
}

.modal { 
 
    display: none; 
 
    position: fixed; 
 
    z-index: 1; 
 
    top: 0; 
 
} 
 

 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 15% auto; 
 
    border: 1px solid #888; 
 
    width: 100px; 
 
    box-shadow: 0px 8px 16px 0px rgba(4, 4, 4, 0.61); 
 
} 
 

 
.cButton { 
 
    position: realtive; 
 
    display: inline-block; 
 
    background-color: grey; 
 
    width: 100px; 
 
    border-top: 1px solid black; 
 
    border-bottom: 1px solid black; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.close { 
 
    /*position: absolute; <-Remove this-->*/ 
 
    display: inline; 
 
    color: #aaa; 
 
    float: right; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: black; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
} 
 

 
p.boxtitle { 
 
    display: inline; 
 
}

<div id="myBtn">Open Modal</div> 
 
<div id="myModal" class="modal"> 
 
    <div class="modal-content"> 
 
    <div id="closeButton" class="cButton"> 
 
     <p class="boxtitle">tools</p> 
 
     <div class="close">&times;</div> 
 
    </div> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    <p>Some text</p> 
 
    </div> 
 

 
</div>