Warning box after div click

Navigation
1

Hello, I wanted to know how I can when someone clicks a button to open a box in the center of the page and that the background page is blurred.

I only have the button code: 

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

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

    
asked by anonymous 23.02.2015 / 16:40

4 answers

1

First you should download the necessary files to use Bootstrap and JQuery . After downloading, place the files in your project and refer to the files on your page that you want to use the (modal) component.

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>

Here you'll find an example of what your use would look like, and the site has other components that you might find useful.

    
23.02.2015 / 17:14
1

I would like to put my 2 cents here.

As I see you are still starting with javaScript, jQuery, etc ... I would like to introduce you to a FrontEnd Framework which in my opinion (2 cents) is better than Bootstrap.

Zurb Foundation.

Below is an example of a modal dialog 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><scriptsrc="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>
    
23.02.2015 / 17:28
1

A simple and elegant alternative without using libraries is to use the alert , prompt or confirm 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>
    
23.02.2015 / 17:29
1

There are multiple plugins to make it easier to create 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údoqueseráexibidodentrodajanelamodal.--><divclass='login'><formaction='#'><inputtype='email'placeholder='Email'/><inputtype='password'placeholder='Senha'/><inputtype='submit'value='Login'/></form></div><!--Elementoqueirádispararoeventoparaexibirajanelamodal.--><divid='login-btn'>CliqueparafazerLogin</div>

Bonus:Ifitisinyourinterest,thepluginhasotherfeatureslike:tooltips,confirmationwindows,news,warnings.See documentation .

    
23.02.2015 / 17:26
How to change the innerHTML of a DIV, and have other elements within it that can not be changed? Unity - Error: Object reference not set to an instance of an object - Instantiate