从JQuery打开一个css模式

时间:2016-09-06 08:48:45

标签: jquery css

我有一个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>

0 个答案:

没有答案