我有一个css模式,从链接打开并有一个关闭按钮。
我想在用户在表行上双击它并在Jquery中使用此代码时打开它,
$('.modalDialogEdit').css('opacity','1');
$('.modalDialogEdit').css('pointer-events','auto');
这会打开模态,但关闭按钮不起作用,
任何想法?,
由于
我的代码
$(document).ready(function () {
$(document).delegate("#tableMain tr", "dblclick", function () {
$('.modalDialogEdit').css('opacity','1');
$('.modalDialogEdit').css('pointer-events','auto');
});
});
.modalDialogEdit {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
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;
}
.modalDialogEdit:target {
opacity:1;
pointer-events: auto;
}
.modalDialogEdit > div {
width: 375px;
height: 240px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: solid;
border-color: grey;
border-width : 1px;
background: white;
}
.close {
position: absolute;
right: 10px;
text-align: center;
top: 5px;
text-decoration:none;
}
.close:hover {
font-weight: bold;
}
<nav>
<ul>
<li><a href="#modalEdit" class="inputlink" id="modalOpenEdit">Edit</a></li>
</ul>
</nav>
<br>
<div class="container" id="container">
<table id="tableMain">
<tr>
<th>Column 1</th>
<th>Column2</th>
</tr>
<tr>
<td>Row 1 col 1</td>
<td>Row 2 col 1</td>
</tr>
<tr>
<td>Row 2 col 1</td>
<td>Row 2 col 2</td>
</tr>
</table>
</div>
<!--modal----------------------------------------------------->
<form id="formEdit" method="POST" action="fit_edit.php">
<div id="modalEdit" class="modalDialogEdit">
<div>
<a href="#close" title="Close" class="close">x</a><br>
<h1>Modal</h1>
</div>
</div>
</form>