JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<link rel="stylesheet" href="http://qa2.n2clic.com/gim/wp-content/themes/gobert/css/bootstrap.min.css">
<script src="http://qa2.n2clic.com/gim/wp-content/themes/gobert/js/vendor/bootstrap.min.js"></script>
<form id="resa-CX0470" method="post" name="dispo" action="http://google.com" class="form-booking" target="_blank">
    <input type="submit" class="btn btn-primary btn-booking" value="Book now">
</form>

<div id="booking" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="bookingLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        	<h3 id="bookingLabel">Réservation</h3>

    </div>
    <div class="modal-body">
        <p>Vous allez maintenant être redirigé sur notre passerelle de réservation.</p>
        <img src="http://qa2.n2clic.com/gim/wp-content/themes/gobert/img/loading.gif" alt="Chargement">
    </div>
</div>

JavaScript

jQuery(document).ready(function ($) {
    $('.btn-booking').click(function (e) {
        var form = $(this).parent('.form-booking');
        $('#booking').modal('show');

        e.preventDefault();

        setTimeout(function () {
            $('#booking').modal('hide');
            form.submit();
        }, 3000);
    });
});