Closing Modal Form and Opening a New One When Button is Clicked

Question

So I am building a website for school project but seem to be having some trouble with one section. I have a sign up link so that users can sign up to become a member of the site. Once the sign up link is clicked a modal form pops up in the middle of the screen where the user inputs data into specific fields. Once they have done this they click a submit button "Go" at the bottom of the page. This triggers another modal form to pop up saying "Thank you for registering to Dominion Luxury Cars". There is an X in the top right corner and once they click it I noticed the Sign Up modal form was still open. I am trying to make it so that when the "Go" button is clicked the Sign Up modal form closes. As of now the only way the Sign Up modal form closes is when the X in the top right corner is clicked. I want to retain this as well. Basically I want the Sign Up modal form to close either when the X is clicked or the "Go" button is clicked and if the "Go" button is clicked I want the modal form saying "Thank you for registering to Dominion Luxury Cars" to appear.

Thank you anyone who is able to help me out. I really appreciate it.

BELOW IS A JSFIDDLE VERSION OF MY CODE FOR SOME REASON THE FORM DOES NOT POP UP USING JSFIDDLE HOWEVER I KNOW THE CODE WORKS YOU CAN POST IT INTO TEXT EDIT FOR TESTING PURPOSES.

http://jsfiddle.net/3cjbf/

//HTML CODE

<li><a href="#" onClick="openSignUp()">Sign-Up</a>
</li>
<div class="modalSignUp">
    <div>
        <table>
            <tr>
                <td>
                    <input type="text" placeholder="First Name" />
                </td>
                <td>
                    <input type="text" placeholder="Last Name" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="E-mail" />
                </td>
                <td>
                    <input type="text" placeholder="Phone Number" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="Street Address" />
                </td>
                <td>
                    <input type="text" placeholder="City" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" placeholder="State" />
                </td>
                <td>
                    <input type="text" placeholder="Zip Code" />
                </td>
            </tr>
        </table>
        <div class="newsletter">
            <input type="checkbox" />Subscribe to Dominion Luxury Cars News Letter?
            <br />
            <button type="submit" onClick="openConfirm()">Go</button> <a onclick="closeSignUp()" class="close">X</a>

        </div>
    </div>
</div>
<div class="modalConfirm">
    <div>
        <p>Thank you for registering for Dominion Luxury Cars</p> <a onclick="closeConfirm()" class="close">X</a>

    </div>
</div>

// CSS CODE

/********************************************************************************************************************/

/*Designing Modal Forms*/

/********************************************************************************************************************/
 #target {
    opacity:1;
    pointer-events: auto;
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #000000;
}
/********************************************************************************************************************/

/*Style Modal SignUp*/

/********************************************************************************************************************/
 .modalSignUp {
    position:fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    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;
}
.modalSignUp > div {
    width: 300px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
    height:250px;
}
.modalSignUp table {
    margin-left:2%;
    margin-top:10%;
    width:100%;
}
.modalSignUp button {
    float:right;
    margin-right:8px;
}
.signuplogo {
    margin-left:35%;
}
.newsletter {
    width:285px;
    height:20px;
    margin-left:auto;
    margin-right:auto;
    font-size:10px;
}
/********************************************************************************************************************/

/*Style Modal Confirm*/

/********************************************************************************************************************/
 .modalConfirm {
    position:fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    opacity:0;
    pointer-events: none;
}
.modalConfirm > div {
    width: 300px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
    height:250px;
}
.modalConfirm p {
    margin-top:50px;
    text-align:center;
}

//JAVASCRIPT

function openSignUp() {
    document.getElementsByClassName('modalSignUp')[0].id = 'target';
}

function closeSignUp() {
    document.getElementsByClassName('modalSignUp')[0].id = '';
}

function openConfirm() {
    document.getElementsByClassName('modalConfirm')[0].id = 'target';
}

function closeConfirm() {
    document.getElementsByClassName('modalConfirm')[0].id = '';
}

Answer 1

Just add

document.getElementsByClassName('modalSignUp')[0].style.display = 'none';

to your openConfirm() function.

Working Fiddle

Or alternatively add document.getElementsByClassName('modalSignUp')[0].id = ''; like you have it in your closeSignUp() function.

Working Fiddle

Or just call your function closeSignUp(); within your function openConfirm() .

Working Fiddle

Answer 2

You had everything. The only thing you need is to modify the onclick handler of your Go button:

<button type="submit" onClick="openConfirm(); closeSignUp();">Go</button>

Working jsfiddle. . It didn't work because you had the javascript settings to 'execute onLoad', so your functions got wrapped in a event handler and were not global. I changed it.