Warning box after click div

Question

Hi, I was wondering how do I make it so when someone clicks on a button to open a box in the center of the page and the background page is blurred.

I have only the button code:

<a href="login.php"><div class="button"></a></a>

I also wanted the Login.php page to appear in the box.

Answer 1

You must first download the files needed to use the Bootstrap and Jquery. After downloading, put the files in your project and refer the files to your page that you want to use the component (modal).

After the reference is made, add this code to your page.

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

<!-- 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">Título</h4>
      </div>
      <div class="modal-body">
        Coloque o texto aqui.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
        <button type="button" class="btn btn-primary">Salvar</button>
      </div>
    </div>
  </div>
</div>

At this link you find an example of how the use would look, and the site has other components that can be useful to you.

Answer 2

There are several plugins to facilitate the creation of a Modal window. An example using jBox:

$(function(){ 
    new jBox('Modal', {          // Tipo de componente
        width: 400,              // Largura
        height: 200,             // Altura
        attach: $('#login-btn'), // Elemento que quando clicado exibirá a janela
        title: 'Login',          // Título da janela
        content: $('.login')     // Conteúdo da janela
    });
});

/** 
   O CSS não tem relevância, utilizei somente para tornar o exemplo
   mais "apresentável".
*/

.login {
    display: none
}

.login input[type='email'],
.login input[type='password'] {
    border: 1px solid #ccc
}

.login input[type='submit']{
    background: #2cc36b;
    border: none;
    color: #fff
}

.login input {
    margin: 2px 5%;
    padding: 8px;
    width: 90%
}

#login-btn {
    cursor: pointer;
    position: absolute;
    top: 35%;
    left: 45%;
    text-decoration: none;
    color: #2cc36b
}

<!-- Importando o plugin e JQuery-->
<link rel='stylesheet' href='http://code.jboxcdn.com/0.3.2/jBox.css'/>
<script src='http://code.jboxcdn.com/0.3.2/jBox.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


<!-- Conteúdo que será exibido dentro da janela modal. -->
<div class='login'>
    <form action='#'>
        <input type='email' placeholder='Email'/>
        <input type='password' placeholder='Senha'/>
        <input type='submit' value='Login'/>
    </form>
</div>


<!--  Elemento que irá disparar o evento para exibir a janela modal. -->
<div id='login-btn'>Clique para fazer Login</div>

---

Bonus: If it’s in your interest, the same plugin has other features like: tooltips, confirmation windows, news, warnings. See documentation.

Answer 3

I’d like to put my 2 cents here.

As I see you are still starting with Avascript, jQuery, etc... I would like to present you a Frontend Framework that in my opinion (2 cents) is better than Bootstrap.

Zurb Foundation.

Below is an example of a modal dialogue using it (see Fullscreen).

$(document).foundation();

<link href="http://cdn.foundation5.zurb.com/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.foundation5.zurb.com/foundation.js"></script>

<a href="#" data-reveal-id="firstModal" class="radius button">Modal in a modal&hellip;</a>

<!-- Reveal Modals begin -->
<div id="firstModal" class="reveal-modal" data-reveal>
  <h2>This is a modal.</h2>
  <p>Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of <code>close-reveal-modal</code>. Clicking anywhere outside the modal will also dismiss it.</p>
  <p>Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.</p>
  <p><a href="#" data-reveal-id="secondModal" class="secondary button">Second Modal...</a></p>
  <a class="close-reveal-modal">&#215;</a>
</div>

<div id="secondModal" class="reveal-modal" data-reveal>
  <h2>This is a second modal.</h2>
  <p>See? It just slides into place after the other first modal. Very handy when you need subsequent dialogs, or when a modal option impacts or requires another decision.</p>
  <a class="close-reveal-modal">&#215;</a>
</div>

Answer 4

A simple and elegant alternative without using libraries is to use the commands alert, prompt or confirm of JavaScript

function teste1(){
  alert("Alerta simples!");  
}

function teste2(){
  var resultado = confirm("Alerta do tipo Confirme? Sim Não");
  if ( resultado == true ) {
    document.getElementById("teste").innerHTML = "SIM";
  } else {
    document.getElementById("teste").innerHTML = "NÃO";
  }
}

function teste3(){
  var algo = prompt('Alerta do tipo Escreva Algo');
  document.getElementById("teste").innerHTML = algo;
}

<input type="button" onclick="teste1()" value="alert()" />
<input type="button" onclick="teste2()" value="confirm()" />
<input type="button" onclick="teste3()" value="prompt()" />

<div id="teste"></div>