Saved!

Changing z-index to make a clicked div appear on top - 1FHKGXiO - 1FHKGXiO

Changing z-index to make a clicked div appear on top jquery animate codepen jsfiddle codeeditor etc... codesheet

Changing z-index to make a clicked div appear on top jquery animate

  
<div id="wrap" class="col-100-max">

<a href="#" id="s1" class="btn primary s">sort 1</a>
<a href="#" id="s2" class="btn primary s">sort 2</a>
<a href="#" id="s3" class="btn primary s">sort 3</a>

 <textarea style="display:none;" id="meta"></textarea>
<textarea style="display:none;" id="allin"></textarea>
	
	
	
	
<div id="iframe">
   <div class="header">
	   <div id="resizer"><div id="innerresizer"></div></div>
	   <div id="windowsize">&times;</div>
	   <div class="defsize">
		   <a id="mobile" href="#"><i class="fa fa-mobile fa-2x"></i></a>
		   <a id="tablet" href="#"><i class="fa fa-tablet fa-2x fa-rotate-90"></i></a>
		   <a id="desktop" href="#"><i class="fa fa-desktop fa-2x"></i></a>
  
	   </div>
	 </div>
	 <div id="overlay"></div>
	 <iframe id="outputframe"></iframe>
</div>
	
	
	
	
	
	
	
	
	
	
	
	
	
<div class="box" id="jsdiv">

	<div class="window">
		<div class="window-header">
	   		<div id="resizer"><div id="innerresizer"></div></div>
			<div class="action-buttons">JavaScript</div>
		</div>
		<div class="window-body">
			<textarea class="code-input-js">  $( document ).ready(function(){
	   
    $(".get-cs-popup").click(function(e){
      e.preventDefault();
		
      var popup = '<div class="cs-popup"><div class="cs-popup-outer"><div class="cs-popup-top"><span class="cs-popup-title">Info</span></div><iframe class="cs-popup-iframe" scrolling="auto"></iframe><div class="cs-popup-bottom"><div class="cs-popup-close btn m danger">close</div></div></div>';
      $( "body" ).append( popup );

      $(".cs-popup").fadeIn();		
	  $( ".cs-popup-outer" ).animate({margin: "0 0 0 0"}, 400);

		
	  var title = $( this ).attr( "data-title" );
	  if( title !== '' ){
      	$( ".cs-popup-title" ).html( title );
		$( ".cs-popup-iframe" ).removeClass( "cs-popup-iframe-no-title" );
	  }else{
		$( ".cs-popup-top" ).hide();
		$( ".cs-popup-iframe" ).addClass( "cs-popup-iframe-no-title" );
	  };
		
	  var href = $( this ).attr( "href" );
      $( ".cs-popup-iframe" ).attr('src', href );
	  
	  var diw = $( this ).attr( "data-iframe-width" );
	  var dih = $( this ).attr( "data-iframe-height" );
     
	  var ww = $( window ).width();
	  var wh = $( window ).height();

	  if( ww > diw){
	    $( ".cs-popup-outer" ).width( diw );
      }else{
	    $( ".cs-popup-outer" ).width( "95%" );
	  };
		
	  if( wh > dih ){
	    $( ".cs-popup-outer" ).height( dih );
      }else{
	    $( ".cs-popup-outer" ).height( "95%" );
	  };
		
    });
	  
	$( document ).on("click", ".cs-popup-close", function(){
      $( ".cs-popup" ).fadeOut();
	  $( ".cs-popup-outer" ).animate({margin: "100px 0 0 0"}, 400);
      $( ".cs-popup-iframe" ).attr('src', "");
    });
	 
  });</textarea>
			<pre class="code-output-js">
				<code class="language-javascript"></code>
			</pre>
		</div>
	</div>	
</div>
    
	
	
	
	
	
	

<div class="box" id="cssdiv">
	<div class="window">
		<div class="window-header">
	   		<div id="resizer"><div id="innerresizer"></div></div>
			<div class="action-buttons">CSS</div>
		</div>
		<div class="window-body">
			<textarea  class="code-input-css">

@import url(http://codesheet.org/sheets/N9adRZf6.css);
</textarea>
			<pre class="code-output-css">
				<code class="language-javascript"></code>
			</pre>
		</div>
	</div>	
</div>
	

	
	
	
	
	
	
	
	
	
<div class="box" id="htmldiv">
	<div class="window">
		<div class="window-header">
	   		<div id="resizer"><div id="innerresizer"></div></div>
			<div class="action-buttons">HTML</div>
		</div>
		<div class="window-body">
			<textarea  class="code-input-html">
<h1>Codesheet UI</h1>
<div class="col-100-max p30">
<pre>
<code>
@import url(http://codesheet.org/sheets/N9adRZf6.css);
</code>
</pre>
</div>
	
			</textarea>
			<pre class="code-output-html">
				<code class="language-javascript"></code>
			</pre>
		</div>
	</div>
</div>
	
	
  
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js