我想在 html/css 中显示此面板或模态,但我无法显示它,因为我有
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
当我删除该链接时,模态将显示,但当它存在时,模态不显示。
P.S 我无法删除该链接,因为我的所有设计都将被删除或不可见,所以我如何在不删除该链接的情况下显示该模式这是我的 css
样式
<style type="text/css">
body {
/* general styles */
padding: 30px;
font-family: 'Open Sans', sans-serif;
}
/* overlay styles, all needed */
.overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 10;
}
/* just some content with arbitrary styles for explanation purposes */
.modal {
width: 300px;
height: 200px;
line-height: 200px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background-color: #f1c40f;
border-radius: 5px;
text-align: center;
z-index: 11; /* 1px higher than the overlay layer */
}
.content {
margin: 30px;
}
h1 {
font-family: 'Federo', sans-serif;
}
</style>
我的 div
<div class="overlay"></div>
<div class="modal" id="modal"><?php echo $row['id']; ?> <?php echo $row['additional_info']; ?></div>
最佳答案
这不显示对话框,因为 modal
Bootstrap 也使用类。
如果您更改行 <div class="modal" id="modal">
至 <div class="mymodal" id="modal">
你会看到它现在出现了。请务必在您的 CSS 中也更新您的类名。
关于php - 如何在叠加 HTML - CSS 中显示模态/面板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54054285/