Closing modal with submit button and close

user_13085285 0
Viewed 74

I managed to get my modal to close using the X button but I'm trying to do the same thing for the submit button but can seem to get that to work.

This is what I tried

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

Basically what it comes down to for closing the modal using the "x" I used CSS.

For the submit I tried using jQuery:

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

I can't seem to make the submitButton the register the function. Do you see what I am doing wrong?

modal-dialog html jquery javascript
1 Answers

You can't use href with <button>.
Use <button onclick="window.location.href = '#close';">Submit</button>

Instead of <button onclick = "writeData(); getData();" href="#close" id="submitButton"> Submit</button>.


Here is the full code:

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