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

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;
}

基本上，我使用 CSS 来使用“x”关闭模式。

对于提交，我尝试使用 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;
}