JSFiddle - React, Tailwind, and code Playground

by Laetiparis

HTML

<title>MA pop-up avec SLIDER !!</title>

<!-- pop up : CSS -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- pop up : jquery -->
<script type="text/javascript" src="js/css-pop.js"></script>


<!-- bxSlider : CSS  -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />


<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />

<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<!-- <script src="js/monbxslider.js"></script> -->
<!--<script src="js/monbxslider2.js"></script> -->

<!-- SOLUTION DE IDRA -->
<script type="text/javascript">


        function popup2(windowname) {
            blanket_size(windowname);
            window_pos(windowname);
            toggle('blanket');
            toggle(windowname);     
            $(".bxslider").bxSlider();
        }
    </script>



</head>




<body>

<div id="container">

  <div id="mainContent">
  
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis tempore sapiente sed ut, ex fugit eaque enim laborum rem et similique. Tempora adipisci, facilis aliquid nesciunt perferendis quas dolorum optio! </p> -->   
   
        
    <!-- Mon lien de départ
    <a href="#" onclick="popup('popUpDiv')">Projet Uranus</a> -->

    <a href="#" onclick="popup2('popUpDiv')">Projet Uranus</a>

<!--POPUP-->    

    <div id="blanket" style="display:none;"></div>
	
    <div id="popUpDiv" style="display:none;"> 
    
      <h1>Projet Uranus : développement web</h1>
  
      <!--<img src="http://placekitten.com/800/400" alt="un gros chat" /> -->
      
    
      <ul class="bxslider">
        <li><img src="images/ordi1.jpeg"/></li>
        <li><img src="images/ordi2.jpeg" /></li>
        <li><img src="images/ordi3.jpeg" /></li>
      </ul>

  


      <div id="contexte">
      <h2>CONTEXTE</h2> 
     ...

CSS

/*WebDesignAndSuch.com*/


@charset "UTF-8";
body {
	font-family:Palatino, Baskerville, Georgia, serif;
	margin: 0; 
	padding: 0;
	text-align: center; 
	
}
 #container {
	width: 780px;  /* A CHANGER */
	margin: 0 auto; 
	font-size:14px;
	text-align: left; 
}

#mainContent {
	padding: 30px 60px;
	min-height:700px; /* 800 */
	/*line-height:25px;*/
}

img {border:0px}

/*STYLES FOR CSS POPUP*/


#blanket {
   background-color:white;
   opacity: 0.8; 
   *background:none; /* étoile importante */
   position:absolute;
   z-index: 9001; 
   top:0px;
   left:0px;
   width:100%;
   height: 700px;
	
}

#popUpDiv {
	position:absolute;
	top: 0;
	/*background:url(pop-back.jpg) no-repeat;
	width:400px;
	height: 400px;
	border:5px solid #000;*/
	z-index: 9002; 
	padding-top: 0;
}

/* J'ENLEVE CAR BXSLIDER
#popUpDiv img{
	padding-left: 300px;
}
*/

#popUpDiv h1{
	padding-top: 0px;
	padding-bottom: 25px; 
	font-weight: normal;
	/*padding-left: 5%;*/
	text-align: center;
	color: #EB0999;

}

#popUpDiv div{
	border: 0px solid black;
	display: inline-block;
	width: 26%;
	top: 15px;
	left: 20px;
	margin-bottom: 30px;
} 

#contexte {
	margin-left: 300px;
	margin-right: 60px;
}

#popUpDiv aside div.site a{
	text-decoration: none;
	color: white;
}

#popUpDiv aside div.site{
	/*color: white;*/
	background-color: #EB0999;
	font-size: 1.1em;/**/
	border: 2px solid #EB0999;
	font-weight: normal;
	padding-left: 0;
	padding-right: 0;
	padding-top: 15px; 
	padding-bottom: 9px;
	margin-left: 745px; 
	margin-top: 0px; 
	width: 140px; 
	height: 25px;
	text-align: center;
}


#popUpDiv aside div.retour{
	color: #EB0999;
	background-color: white;
	font-size: 1.1em;/**/
	border: 2px solid #EB0999;
	text-align: center;
	font-weight: normal;
	padding-left: 0;
	padding-right: 0;
	padding-top: 15px; 
	padding-bottom: 9px;
	margin-left: 30px; 
	margin-top: 0px; 
	width: 140px; 
	height: 25px;
}

#popUpDiv aside div.retour a{
	text-decoration: none;
	color: #EB0999;
}


.rose {
	color: #EB0999;
}

JavaScript

function toggle(div_id) {
	var el = document.getElementById(div_id);
	if ( el.style.display == 'none' ) {	el.style.display = 'block';}
	else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportheight = window.innerHeight;
	} else {
		viewportheight = document.documentElement.clientHeight;
	}
	if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
		blanket_height = viewportheight;
	} else {
		if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
			blanket_height = document.body.parentNode.clientHeight;
		} else {
			blanket_height = document.body.parentNode.scrollHeight;
		}
	}
	var blanket = document.getElementById('blanket');
	blanket.style.height = blanket_height + 'px';
	var popUpDiv = document.getElementById(popUpDivVar);
	popUpDiv_height=blanket_height/2-400;//400 is half popup's height
	popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
	if (typeof window.innerWidth != 'undefined') {
		viewportwidth = window.innerHeight;
	} else {
		viewportwidth = document.documentElement.clientHeight;
	}
	if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
		window_width = viewportwidth;
	} else {
		if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
			window_width = document.body.parentNode.clientWidth;
		} else {
			window_width = document.body.parentNode.scrollWidth;
		}
	}
	var popUpDiv = document.getElementById(popUpDivVar);
	window_width=window_width/2-700;//700 is half popup's width
	popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
	blanket_size(windowname);
	window_pos(windowname);
	toggle('blanket');
	toggle(windowname);		
}