使用提交按钮关闭模式并关闭

Question

我设法使用 X 按钮关闭了我的模式，但我正在尝试对提交按钮做同样的事情，但似乎可以让它工作。

这是我试过的

<div id="openModal" class="modalDialog">
    <div>
    <a href="#close" title="Close" class="close">&#x2715;</a>
     <button onclick = "writeData(); getData();" href="#close" id="submitButton"> Submit </button>

.bodyclose {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    display:none;
    z-index:1;
    position:fixed;
}
.modalDialog:target {
    opacity: 1;
    pointer-events: auto;
}

.modalDialog:target > .bodyclose {
    display:block;
}

基本上，使用 "x" 关闭模态窗口的原因我使用了 CSS。

对于提交，我尝试使用 jQuery:

        <SCRIPT>
            $('#submitButton').submit(function(e) {
                e.preventDefault();
                $('#openModal').modal('hide');
                return false;
            });
        </SCRIPT>

我似乎无法使 submitButton 注册功能。你看到我做错了什么了吗？

Answer 1

您不能将 href 与 <button> 一起使用。
使用 <button onclick="window.location.href = '#close';">Submit</button>

而不是 <button onclick = "writeData(); getData();" href="#close" id="submitButton"> Submit</button>.


这是完整的代码：

<div id="openModal" class="modalDialog">
    <div>
    <a href="#close" title="Close" class="close">&#x2715;</a>
     <button onclick="window.location.href = '#close';"> Submit </button>

.bodyclose {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    display:none;
    z-index:1;
    position:fixed;
}
.modalDialog:target {
    opacity: 1;
    pointer-events: auto;
}

.modalDialog:target > .bodyclose {
    display:block;
}