How to make a popup to insert an email appear at the click of a button

Hello, Maicon

First, the answers to your question are wide, so I'll answer you using 2 methods:

Using only CSS + jQuery

Basically you're going to put your popup code (actually, it's a modal) somewhere in your html, so it'll use jQuery to handle when it should be shown / closed (you can also do this with css ). See the example in JSFiddle .

.modal-back {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 10;
    display: none;
    top: 0; left: 0; right: 0; bottom: 0;
}
.modal-back.toggled {
    display: block;
}
.modal {
    width: 500px;
    background-color: #fff;
    padding: 20px;
    z-index: 20;
    border-radius: 5px;
    border: 1px solid #424242;
    position: fixed;
    top: 50%;
    margin-left: auto;
}

.modal a.close {
    float: right;
    text-transform: uppercase;
    text-decoration: none;
    font-size: 10px;
}

Pay attention to the modal-back class, it is the div that stores modal content, as well as fills the entire screen to focus on the content presented. It will never be visible until used in conjunction with the toggled class. Change the values of the z-index attribute if in your page some html element is "in front" of the modal, but remember that the modal class should always have a z-index greater than the < strong> modal-back .

Ok, but how do I show the modal / popup?

See the html code:

<button type="button" id="mostrar-msg">Assistir</button>

<div id="modal-assistir" class="modal-back">
    <div class="modal">
        <a class="close" href="#" data-toggle="modal-assistir">Fechar</a>
        <form>
            <label for="email">Insira seu email para assistir</label>
            <br>
            <input type="email" name="email">
            <br><br>
            <button type="button">Enviar</button>
        </form>
    </div>
</div>

And our javascript / jQuery code:

$('#mostrar-msg').click(function() {
    $('#modal-assistir').addClass('toggled');
});

$('a.close').click(function(e) {
    e.preventDefault();

    var target = '#' + $(this).data('toggle');
    $(target).removeClass('toggled');
});

We set a id to the button that opens the modal and use this id to show the modal we want, by adding the toggled class.

The $('a.close').click(function(e) ... part tries to close the modal / popup open, using the data-toggle attribute of the link, which must be equal to the modal id / popup .

Note: This is a super simple example, it may have bugs and defects, looking for "modal pure css" or something like you find many other examples better.

Using Bootstrap

Bootstrap is a widely used library out there, I love it (