Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="fr">
<head>
<title>testx</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
jQuery(function($){
   //Lorsque vous cliquez sur un lien de la classe poplight
   $('a.poplight').on('click', function() {
      var popID = $(this).data('rel'); //Trouver la pop-up correspondante
      var popWidth = $(this).data('width'); //Trouver la largeur
​
      //Faire apparaitre la pop-up et ajouter le bouton de fermeture
      $('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
​
      //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
      var popMargTop = ($('#' + popID).height() + 80) / 2;
      var popMargLeft = ($('#' + popID).width() + 80) / 2;
​
      //Apply Margin to Popup
      $('#' + popID).css({
         'margin-top' : -popMargTop,
         'margin-left' : -popMargLeft
      });
​
      //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
      $('body').append('<div id="fade"></div>');
      $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
​
      return false;
   });
​
   //Close Popups and Fade Layer
   $('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
      $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();
      }); //...ils disparaissent ensemble
​
      return false;
   });
});
</script>
</head>
<body>
   <a href="#" data-width="500" data-rel="popup1" class="poplight">Voir la pop-up - Width = 500px</a>
​
   <div id="popup_name"  class="popup_block">
      <h2>CA FONCTIONNE?</h2>
      <p> BLABLA BIDON BIDON BIDON</p>
   </div>
</body>
</html>
 
    body{
       background-color: yellow;
    }
    #fade { /*--Masque opaque noir de fond--*/
       display: none; /*--masqué par défaut--*/
       background: #000;
       position: fixed; left: 0; top: 0;
       width: 100%; height: 100%;
       opacity: .80;
       z-index: 9999;
    }
    .popup_block{
       display: none; /*--masqué par défaut--*/
       background: #fff;
       padding: 20px;
       border: 20px solid #ddd;
       float: left;
       font-size: 1.2em;
       position: fixed;
       top: 50%; left: 50%;
       z-index: 99999;
       /*--Les différentes définitions de Box Shadow en CSS3--*/
       -webkit-box-shadow: 0px 0px 20px #000;
       -moz-box-shadow: 0px 0px 20px #000;
       box-shadow: 0px 0px 20px #000;
       /*--Coins arrondis en CSS3--*/
       -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
       border-radius: 10px;
    }
    img.btn_close {
       float: right;
       margin: -55px -55px 0 0;
    }
    /*--Gérer la position fixed pour IE6--*/
    *html #fade {
    position: absolute;
    }
    *html .popup_block {
    position: absolute;
    }
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers