php – How to make an email insert popup appear when clicking a button

Question:

What I want is something exactly like this page. http://www.movingup.com.br/ When you click on "I want to watch" it opens a kind of pop-up asking for the e-mail.

Answer:

Hello Maicon

First of all, the answers to your question are broad, so I'm going to 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) in some part of your html, then you'll use jQuery to manipulate when it should be shown/closed (you can also do this with css only). Here's 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 holds the modal content, as well as fills the entire screen to give a focus on the presented content. It will never be visible until used in conjunction with the toggled class. Change the z-index attribute values ​​if in your page some html element is "in front" of the modal, but remember that the modal class must always have a z-index greater than the modal-back class.

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 define an id for the button that opens the modal and use that id to show the modal we want by adding the toggled class.

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

_{Note: this is a super simple example, it may have bugs and bugs, looking for "modal pure css" or something like that you think many other examples are better.}

Using Bootstrap

Bootstrap is a popular library out there, I love it (<3). And with it our task is much easier. Here's an example in JSFiddle .

We won'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 end of your page, before the </body> tag or in the js scripts, put the modal's html code:

<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 must be changed here.