我遇到了这个问题

问题描述：

我正在试图做一个模式，我有困难的时间制作工具和关闭按钮出现在同一行。它应该像下面的图片：我遇到了这个问题

enter image description here

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>

而且也是我想要的模式对话框的顶部有风格像下面的形象。

enter image description here

尝试使用'span'，而不是'div'这样的：'

工具的 ×

' – Zorken17

使文本和关闭按钮内嵌元素并给他们一个'vertical-align：middle;' – Maartje

你还可以改正错字'.cButton {position：>> realtive; Redu

答

添加display:flex到.cButton类

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

您也可以从.close类删除position:absolute。

对于三角形，您可以使用border-left, border-right, border-bottom来创建它。

检查例如

片断

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>

完美谢谢.. – Mkoli

答

.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; 
}

只需更换CSS U将得到预期的结果

答

我给它一个快速尝试。

关闭按钮已经定位绝对，但没有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>

答

在下面我的片段中删除的位置绝对的，因为你不会需要这一点。它完美地作为一个内联。这里的问题在于你的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>

我遇到了这个问题

相关推荐