How to add modal popup when someone clicks on add to cart in product's page?

Question

I have a Magento CE-1.9.2.4 installation and I am trying to add a modal popup when someone clicks on Add To Cart in product's page.

I edited the /app/design/frontend/mytheme/template/catalog/product/view.phtml file by adding

// Get the modal
var modal = document.getElementById('ordersAugust');

// Get the button that opens the modal
var btn = document.getElementById("btnOrdersAugust");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

between

if (this.validator.validate()) {
...
  }
}.bind(productAddToCartForm);

and

<div id="ordersAugust" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">×</span>
      <h2>HEADER</h2>
    </div>
    <div class="modal-body">
      <p>Thank you!</p>
    </div>
    <div class="modal-footer">
      <h3>Footer</h3>
    </div>
  </div>
</div>

just outside the script tag of

var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {

the javascript code is taken from http://www.w3schools.com/howto/howto_css_modals.asp

I have also edited the file /app/design/frontend/mytheme/template/catalog/product/view/addtocart.phtml by adding id="btnOrdersAugust" in

<button type="button" title="<?php echo $buttonTitle ?>" id="btnOrdersAugust" class="button btn-cart" onclick="productAddToCartForm.submit(this)">
    <span>
        <span class="view-cart"><?php echo $buttonTitle ?></span>
    </span>
</button>

The javascript code is completely ignored and the product is added in cart (no javascript errors in console).

What I want is when clicking on Add To Cart, open a popup modal with info and when closing the modal to continue by adding the product to cart.

Answer 1

So the problem is in,

onclick="productAddToCartForm.submit(this)"

Better to do is to remove it and add:

<script>
    //Guarantee that $ is used in context of jQuery and not of Prototype library
    (function($){
        //Shorthand for document ready
        $(function(){
            //Other click handler are removed and added one custom
            $('#btnOrdersAugust').off().on('click',function(e){
                //Prevent default browser action = go where href is point or submit/reset action
                e.preventDefault();

                //Show modal box
                $('#ordersAugust').show();

            });
            $('#cartSubmit').off().on('click',function(e){
                //Prevent default browser action = go where href is point or submit/reset action
                e.preventDefault();

                //Hide modal box
                $('#ordersAugust').hide();

                //Submit action trigger
                productAddToCartForm.submit(this);

            });

            //Hide modal if clicked outside of window
            $('body').on('click', function (e) {
                if (!$(e.target).is('#ordersAugust') && $('#ordersAugust').has(e.target).length === 0) {
                    $('#ordersAugust').each(function () {
                        $(this).hide();
            //Submit action trigger
                productAddToCartForm.submit(this);
                    });
                }
            });
        })
    })(jQuery);
</script>

And html of popup:

<div id="ordersAugust" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
            <span id="cartSubmit" class="close">×</span>
            <h2>HEADER</h2>
        </div>
        <div class="modal-body">
            <p>Thank you!</p>
        </div>
        <div class="modal-footer">
            <h3>Footer</h3>
        </div>
    </div>
</div>

To clarify: I added jQuery script to show/hide modal box and button inside a modal box to trigger default action. Need more info to help better in this question.

Edited: because I check one more time question and there is about closing modal trigger adding the product to cart.