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="de">
  <head>
      <meta content="OwnModal" name="description">
      
      <!-- CSS -->
      <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
      <link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
      <link href="http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600,700" rel="stylesheet" type="text/css">
      <link href="https://rawgit.com/janstieler/4a9875ef67fe3aa5d7fc/raw/e4bb9aecc02de01e275fd41ca52f2f1b3b15043e/redacted.css" rel="stylesheet" type="text/css">
      
      <!-- Javascript -->
      <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
      <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
​
      <title></title>
  </head>
  <body>
    <!-- Help Area-->
    <nav class="alert navbar-default alert-dismissable highlvl">
      <button class="close" data-dismiss="alert" type="button">
        <span class="fa fa-times"></span>
        <span class="sr-only">Close</span>
      </button>
​
      <ul class="list-unstyled list-inline">
        <li>
          <strong>Help:</strong>
        </li>
        <li>
          <a href="http://www.getbootstrap.com" target="_blank">Bootstrap</a>
        </li>
        <li>
          <a href="http://fontawesome.io/icons/" target="_blank">FontAwesome</a>
        </li>
        <li>
          <a href="https://rawgit.com/" target="_blank">RawGit</a>
        </li>
      </ul>
    </nav>
    <div class="container-fluid">
      <div class="col-ms-10 col-md-10 col-lg-10">
          <h1>Headline</h1>
          <h2>Subheadline</h2>
          <div class="ownmodal" data-state="close">
              <button class="btn btn-clear modaltoggle"><i class="fa fa-plus rotate-reset"></i></button>
              <div class="ownmodal-body">
                <p class="redacted-regular">
               Cras mattis consectetur purus sit amet fermentum. Curabitur blandit tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur.
                </p>
              </div>
          </div>
          
      </div>
  </body>
</html>
 
html, body {
  height: 100%;
}
​
body {
  font-family: titillium;
    color: #fff;
​
background: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color:#333;
    padding-top: 100px;
}
​
.highlvl {
  position: relative;
  z-index: 99999;
}
​
.show-grid [class^=col-] {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #eee;
  border: 1px solid #ddd;
}
​
.btn-clear {
    background: none;
}
​
.btn-clear:active,
.btn-clear:focus {
  outline: none !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
​
​
.fa {
  font-size: 14px;
}
​
.redacted-regular {
    font-family: redacted-regular;
}
​
.redacted-script-bold {
    font-family: redacted-script-bold;
}
​
.redacted-script-regular {
    font-family: redacted-script-regular;
}
​
.redacted-script-light {
    font-family: redacted-script-light;
}
​
/*--------------------------------------*/
​
.backgimg {
    position: absolute;
    z-index: 0;
}
​
.fa-rotate-45 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5); /*0=0, 1=90, 2=180, 3=270*/
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
​
.rotate45 {
    transform: rotate(45deg);
    transition: .7s;
}
.rotate-reset {
    transform: rotate(0deg);
    transition: .7s;
}
​
.ownmodal {
  margin-top: 120px;
  z-index: 1000;
    position: absolute;
    top: 0;
    background: transparent;
    padding: 10px;
    color: #000;
}
​
.modaltoggle i {
    font-size: 56px;
    color: #000;
}   
    
.ownmodal-body {
    display: none;
}
 
$(function() {
 $('.modaltoggle').on('hover', function (event) {
    $('i', this).toggleClass('fa-spin');
  }).on('click', function(event){
    if($('.ownmodal').data('state') === 'close'){
      $('.modaltoggle i').toggleClass('fa-rotate-45');
      $('.ownmodal').data('state', 'open').css({background: '#fff'});
      $('.ownmodal-body').fadeIn('fast');
      console.log($('.ownmodal').data('data-state'));
    } 
    else {
      $('.ownmodal-body').fadeOut('fast');
      $('.ownmodal').data('state', 'close').css({background: 'transparent'});
      console.log($('.ownmodal').data('data-state'));
    }
     
  });
});
Output

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

Dismiss x
public
Bin info
janpro
0viewers