Wifeo Creative Code

<<< back to homepage for others creatives tricks

POPUP CONFIRMATION BOX WITH JQUERY

Please click me !

And click me too...

Title of the first box !

Hum... Are you really sure ?

NO I'M NOT

Title of the second box !

Is the sky blue?

YES IT IS

BLOGGERS, SHARE THIS CREATIVE DEMO ON YOUR WEBSITE :

     
    <p data-height="360" data-theme-id="9277" data-slug-hash="binaE" data-default-tab="result" data-user="wifeo" class='codepen'>See this Pen on <a href='http://codepen.io/wifeo/pen/binaE'>Codepen</a>
<script async src="//codepen.io/assets/embed/ei.js"></script><div align="center">View source code on <a href="http://www.wifeo.com/code/23-popup-confirmation-box-with-jquery.html">wifeo/code</a></div>

On Facebook

On Twitter

On Google+

On LinkedIn

CSS CODE :

.mymagicoverbox
{
  display:inline-block;
  color:#ffffff;
  padding:10px;
  margin:10px;
  cursor:pointer;
  font-weight:bold
}
.mymagicoverbox_fenetre
{
  z-index:9999;
  position:fixed;
  margin-left:50%;
  top:100px;
  text-align:center;
  display:none;
  padding:5px;
  background-color:#fff;
  color:#97BF0D;
  font-style:normal;
  font-size:20px;
  font-weight:bold
}
.mymagicoverbox_fenetreinterieur
{
  text-align:center;
  overflow:auto;
  padding:10px;
  background-color:#fff;
  color:#666666;
  font-weight:400;
  font-style:normal;
  font-size:17px;
  border-top:1px solid #e7e7e7;
  margin-top:10px
}
.mymagicoverbox_fermer
{
  color:#CB2025;
  cursor:pointer;
  font-weight:400;
  font-size:14px;
  font-style:normal
}
#myfond_gris
{
  display: none;
  background-color:#000000;
  opacity:0.7;
  width:100%;
  height:100%;
  z-index:9998;
  position:fixed;
  top:0;
  bottom:0;
  right:0;
  left:0;
}

JAVASCRIPT CODE :

$(document).ready(function(){

$(".mymagicoverbox").click(function()
{
        $('#myfond_gris').fadeIn(300);
        var iddiv = $(this).attr("iddiv");
        $('#'+iddiv).fadeIn(300);
        $('#myfond_gris').attr('opendiv',iddiv);
        return false;
});

$('#myfond_gris, .mymagicoverbox_fermer').click(function()
{
        var iddiv = $("#myfond_gris").attr('opendiv');
        $('#myfond_gris').fadeOut(300);
        $('#'+iddiv).fadeOut(300);
});

});

HTML CODE :

<div id="myfond_gris" opendiv=""></div>

<div align="center">

<div style="background-color:#00A096;" iddiv="box_1" class="mymagicoverbox">
Please click me !
</div>

<div style="background-color:#F8B334;" iddiv="box_2" class="mymagicoverbox">
And click me too...
</div>

</div>


<div id="box_1" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;">
Title of the first box !
<div class="mymagicoverbox_fenetreinterieur" style="height:150px; ">

<div align="center">
<br>Hum... Are you really sure ?
<br><br>


<div style="width:100px" align="center" class="mymagicoverbox_fermer">NO I'M NOT</div>


</div>
</div>
</div>




<div id="box_2" class="mymagicoverbox_fenetre" style="left:-225px; width:450px;">
Title of the second box !
<div class="mymagicoverbox_fenetreinterieur" style="height:150px; ">
<div align="center">
<br>Is the sky blue?
<br><br>
<div style="width:100px" align="center" class="mymagicoverbox_fermer">YES IT IS</div>


</div>
</div>
</div>