How to make a pop-up to insert an email appear when clicking a button

Question

What I want is something just like on this page. http://www.movingup.com.br/ By clicking "I Want to Watch" it opens a kind of pop-up asking for the email.

Answer 1

Hello, Maicon

First of all, the answers to your question are broad, so I will answer you using 2 methods:

1. Using only CSS + jQuery.
2. Using a library called Bootstrap.

Using only CSS + jQuery

Basically you’ll put your popup code (actually, it’s a modal) somewhere in your html, so you’ll use jQuery to manipulate when it should be shown/closed (you can also do this only with css). See here 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 in class modal-back, she is the div that stores the content of the modal, as well as fills the entire screen to give a focus on the content presented. It will never be visible until used in conjunction with the class toggled. Change the values of the attribute z-index if on your page some html element is "in front" of the modal, but remember that the class modal should always have a z-index greater than the class modal-back.

Okay, 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 have defined a id to the button that opens the modal and we use this id to show the modal we want, adding the class toggled.

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

_{Note: this is a super simple example, can present bugs and defects, looking for "modal Pure css" or something like you find many other better examples.}

Using the Bootstrap

Bootstrap is a widely used library out there, I love it (<3). And with it our task becomes much easier. See here an example in Jsfiddle.

We don’t even need to deal with jQuery or javascript now, we just need to define an element that opens our modal:

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

We use the attributes data-toggle="modal" and data-toggle="#id-do-modal".

At the bottom of your page, before the tag </body> or else from the js scripts put the html code of the modal:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

The content you want to present in modal should be changed here.