Formulario Modal de pago

×

Dirección de Envio

Nombre Completo Email

Morada Num

Ciudad Cod_Postal

Pagamento

Tarjetas aceptadas

Nombre de la tarjeta

numero de tarjeta

Caducidad

CVV

Dirección de envío igual que facturación

---

Como crear formulario Modal de Pago

Lo primero es crear el formulario, que como es habitual en este blog, vos dejo el codigo, para que tengais mucho trabajo, eso si, si nos vos gusta el diseno, pues le cambiais los estilos a vuestro gusto y punto

...

Codigo del HTML

<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Ir al pago</button>

<div id="id01" class="modal">
    <span onclick="document.getElementById('id01').style.display='none'" class="close"
        title="Close Modal">×</span>
    <form style="width:650px" class="modal-content" action="/action_page.php">
        <div class="container">

            <div class="row">
                <div class="col-50">
                    <h3>Dirección de Envio</h3>
                    <div class="row">

                        <div class="row">
                            <label for="fname"><i class="fa fa-user"></i> Nombre Completo</label>
                            <input type="text" id="fname" name="firstname" placeholder="John M. Doe">
                            <label for="email"><i class="fa fa-envelope"></i> Email</label>
                            <input type="text" id="email" name="email" placeholder="john@example.com">
                        </div>
                        <div class="row">
                            <label for="adr"><i class="fa fa-address-card-o"></i> Morada</label>
                            <input type="text" id="morada" name="morada" placeholder="Calle Castellana">
                            <label for="zip">Num</label>
                            <input type="text" id="num" name="num" placeholder="12 7-B escal-1">
                        </div>
                        <div class="row">

                            <label for="city"><i class="fa fa-institution"></i> Ciudad</label>
                            <input type="text" id="city" name="city" placeholder="Madrid">


                            <label for="zip">Cod_Postal</label>
                            <input type="text" id="zip" name="zip" placeholder="10001">

                        </div>
                    </div>

                    <div class="col-50">
                        <h3>Pagamento</h3>
                        <label for="fname">Tarjetas aceptadas</label>
                        <div class="icon-container">
                            <i class="fa fa-cc-visa" style="color:navy;"></i>
                            <i class="fa fa-cc-amex" style="color:blue;"></i>
                            <i class="fa fa-cc-mastercard" style="color:red;"></i>
                            <i class="fa fa-cc-discover" style="color:orange;"></i>
                        </div>
                        <div class="row">
                            <label for="cname">Nombre de la tarjeta</label>
                            <input type="text" id="cname" name="cardname" placeholder="John More Doe">
                        </div>
                        <div class="row">
                            <label for="ccnum">numero de tarjeta</label>
                            <input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
                            <div class="col-50">
                                <label for="expyear">Caducidad</label>
                                <input type="text" id="expyear" name="expyear" placeholder="09/2018">
                            </div>
                            <div class="col-50">
                                <label for="cvv">CVV</label>
                                <input type="text" id="cvv" name="cvv" placeholder="352">
                            </div>
                        </div>
                        <label>
                            <input type="checkbox" checked="checked" name="sameadr"> Dirección de envío igual que
                            facturación
                        </label>
                        <input type="submit" value="Continue to checkout" class="btn">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div><br>
    

El segundo paso despues del html es crear los estilos para el modal, se puden cambiar a vuestro gusto

Codigo del CSS

body {
    font-family: Arial, Helvetica, sans-serif;
}
* {
    box-sizing: border-box;
}
/* Full-width input fields */
input[type=text],
input[type=password] {
    padding: 10px;
    margin: 5px 0 20px 0;
    border: none;
    background: #f1f1f1;
}
/* Add a background color when the inputs get focus */
input[type=text]:focus,
input[type=password]:focus {
    background-color: #ddd;
    outline: none;
}
/* Set a style for all buttons */
button {
    background-color: #04AA6D;
    color: white;
    padding: 10px 15px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
}
button:hover {
    opacity: 1;
}
/* Extra styles for the cancel button */
.cancelbtn {
    padding: 14px 20px;
    background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn,
.signupbtn {
    float: left;
    width: 50%;
}
/* Add padding to container elements */
.container {
    padding: 16px;
}
/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: #474e5d;
    padding-top: 50px;
}
/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto;
    /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
}
/* Style the horizontal ruler */
hr {
    border: 1px solid #f1f1f1;
    margin-bottom: 25px;
}
/* The Close Button (x) */
.close {
    position: absolute;
    right: 35px;
    top: 15px;
    font-size: 30px;
    font-weight: bold;
    color: #f1f1f1;
}
.close:hover,
.close:focus {
    color: #f44336;
    cursor: pointer;
}
/* Clear floats */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
    .cancelbtn,
    .signupbtn {
        width: 100%;
    }
}
    

Por ultimo el javascript para que funcione el modal

Codigo del Javascript

 <script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
    

Ir al indice

---