SitioWebITTEC/modal-boletin.html

<link rel="stylesheet" type="text/css" href="css/style-modal-boletin.css">
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- production version, optimized for size and speed -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- vue-cookies -->
<script src="https://unpkg.com/vue-cookies@1.7.4/vue-cookies.js"></script>
<!-- Vue i18n -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

<div id="ouibounce-modal" class="removeformobile">
    <div id="appmodal">
        <div class="underlay"></div>
        <div class="modalNuevo">
            <div class="modal-body modal-head">
                <div class="col-md-12 mt-3 text-center" v-if="form">
                    <h2 class="modal-title">{{ $t("message.boletintitulo") }}</h2>
                    <p>{{ $t("message.boletinsubtitulo") }}</p>
                </div>
            </div>
            <div style="justify-content: center;">
                <form novalidate="true" method="post">
                    <div v-if="form" class="mt-4">
                        <div class="mx-auto mt-3 modal-form">
                            <input v-model="email" type="email" :placeholder="$t('message.boletininput')" required>
                        </div>
                        <div class="mx-auto mt-2" style="width: 150px;">
                            <button @click="checkForm">{{ $t("message.boletinboton") }}</button>
                        </div>
                    </div>
                    <div v-if="loader" class="text-center col-md-12">
                        <img class="img-fluid" src="images/shared/loader.gif" alt="">
                    </div>
                    <div v-if="respuesta" class="text-center">
                        <img :src="imagen" class="img-fluid" alt="">
                        <h2>{{message}}</h2>
                    </div>
                    <p v-if="errors.length" class="mx-auto text-center" style="width: 250px;">
                        <label v-for="error in errors" style="color:red;font-size: 12px">{{ error }}</label>
                    </p>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-salir" v-if="form" @click="closeModal">{{ $t("message.boletincancelar") }}</button>
            </div>
        </div>
    </div>
</div>