更改自定义模态的边距颜色
change margin color on custom modal
我想将自定义模态框周围的区域(边距)更改为这种颜色 #494c4e54。如果用户在模态框外点击它关闭,如果它不受影响就好了
CSS
.mojmodal
{
background: #e2e3e4;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: none;
width: 350px;
height: 400px;
border-radius: 2px;
border-bottom: 5px solid gray;
}
HTML
<div class="mojmodal gorkaze">
<form name="vnos" method="post">
<div><legend>Prijava</legend>
<label>Uporabniško ime</label><br>
<input type="text" name="ime">
</div>
<div>
<br><label>Geslo</label>
<br><input type="password" name="geslo">
</div>
<div><input type="checkbox" name="zapomni"> Zapomni si me<br><br>
<button type="submit" class="btn btn-primary" name="tipkamodal">Prijava</button></div><div>
<a href="index.php?stran=registracija" style="text-decoration:none;color:gray;">Še nimate računa?</a>
</div></form>
Login();
</div>
Here is a picture of the highlighted modal(click here)
没有边距颜色属性。
要实现此效果,您需要额外的元素或伪元素。
J.D。评论你的问题 link: https://developer.mozilla.org/en-US/docs/Web/CSS/:target#Pure-CSS_lightbox 这应该可以帮助你创造效果。
我还建议您复习一下 CSS 盒子模型:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
我想将自定义模态框周围的区域(边距)更改为这种颜色 #494c4e54。如果用户在模态框外点击它关闭,如果它不受影响就好了
CSS
.mojmodal
{
background: #e2e3e4;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: none;
width: 350px;
height: 400px;
border-radius: 2px;
border-bottom: 5px solid gray;
}
HTML
<div class="mojmodal gorkaze">
<form name="vnos" method="post">
<div><legend>Prijava</legend>
<label>Uporabniško ime</label><br>
<input type="text" name="ime">
</div>
<div>
<br><label>Geslo</label>
<br><input type="password" name="geslo">
</div>
<div><input type="checkbox" name="zapomni"> Zapomni si me<br><br>
<button type="submit" class="btn btn-primary" name="tipkamodal">Prijava</button></div><div>
<a href="index.php?stran=registracija" style="text-decoration:none;color:gray;">Še nimate računa?</a>
</div></form>
Login();
</div>
Here is a picture of the highlighted modal(click here)
没有边距颜色属性。
要实现此效果,您需要额外的元素或伪元素。
J.D。评论你的问题 link: https://developer.mozilla.org/en-US/docs/Web/CSS/:target#Pure-CSS_lightbox 这应该可以帮助你创造效果。
我还建议您复习一下 CSS 盒子模型:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model