我试图让这个窗口模块打开,但是它没有获取#openModel 引用。 URL 更改为 index.php?page=TestOverview#openModal 但什么也没有出现
最终我希望能够折叠我的一个显示表格的标题,当用户单击“查看”时,它应该调出模块并显示附加信息供用户查看。
HTML
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
<div class="content">
<div class="wrap-table100">
<div class="table100 ver1 m-b-110">
<table data-vertable="ver1">
<thead>
<thead>
<tr class="row100 head">
<th class="column100 column1">Test Number</th>
<th class="column100 column2">Test Module</th>
<th class="column100 column3">Class Average</th>
<th class="column100 column3">More Info</th>
</tr>
</thead>
<tbody>
<?php while ($row = $data1->fetch()): ?>
<tr class="row100">
<td class="column100 column1">
<?php echo htmlspecialchars($row['TEST_ID']) ?>
</td>
<td class="column100 column2">
<?php echo htmlspecialchars($row['TEST_DESCRIPTION']); ?>
</td>
<td class="column100 column3">
<?php echo htmlspecialchars($row['TEST_AVERAGE']); ?>
</td>
<td class="column100 column4"><a href=""><a href="#openModal">View</a>
</td>
</tr>
<?php endwhile; ?>
<div id="myModal" class="modal">
<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>TEST INFORMTATION</h2>
<p>DISPLAY MORE INFO ON STUDENTS - LINE 2</p>
<p>DISPLAY MORE INFO ON STUDENTS - LINE 2</p>
</div>
</div>
</div>
</tbody>
</table>
</div>
</div>
最佳答案
您指的是模态 (openModal) 内部的内容,而不是模态本身 (myModal)。
此外,如果您想在不使用 Javascript 的情况下触发模式,则需要将 'data-toggle="modal"' 添加到 href。
改变:
<a href="#openModal">View</a>
收件人:
<a href="#myModal" data-toggle="modal">View</a>
关于html - 当我选择 'View' 时模块窗口不会打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55689195/