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>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
  
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  .page_blurred_bg{
    width:100%;
    height:100%;
    position:absolute;
    left:0px;
    top:0px;
    /*
    background:rgba(255,20,255,0.5);
    */
    
    z-index:111;
  }
  
  .hidden {
    display:none;
  }
  
  #login_form_wrapper {
    background-color:pink;
    
    border:5px outset green;  
    margin:0px auto;
    padding:10px;
    text-align:center;
    
    position:absolute;
    top:50%;
    left:25%;
    
    z-index:999;
  }
</style>
  <script src="http://webcodingeasy.com/my_classes/js/blur_effect/blur_effect.jquery.js"></script>
</head>
<body>
  
  <div id="login_form_wrapper" class="hidden">
    <form action="" id="loginForm">
      <div>
        <div>
          <label for="username">Username: <input type="text" name="user" id="username" /></label></div>
        <div>
          <label for="password">Password: <input type="password" name="password" id="password" /></label>
        </div>
        <div>
          <input type="submit" value="Submit" />
        </div>
      </div>
    </form>
  </div>
  
  <div id="blurred_bg"></div>
  
  <button id="myButton">This is a button - press it</button>
  
  <p id="hello">Hello World</p>
  
  
  <p id="hellobello">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sem magna, tristique ut imperdiet at, porttitor non ipsum. Fusce tincidunt arcu quis velit rhoncus vel euismod odio volutpat. Aenean at tortor massa. Donec nisi justo, laoreet at ullamcorper non, accumsan ut tortor. Etiam sed eleifend libero. Fusce sit amet enim lorem, vel iaculis nisi. Nullam pharetra lacinia magna, at mattis libero sodales vel. Aenean semper mauris quis nunc condimentum fringilla. Morbi sodales fermentum feugiat. Donec a leo id enim sagittis aliquam et a mi. Nulla lectus neque, vehicula vitae ultricies ac, scelerisque vulputate mauris. Nulla vel nibh nec arcu blandit faucibus. Praesent scelerisque lacinia erat vitae hendrerit. Donec tincidunt, felis non ultricies egestas, nisi justo varius nibh, eu vulputate libero neque sit amet lorem.
​
Nullam ac enim eget erat pretium tristique venenatis vitae mauris. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent facilisis erat non dolor placerat bibendum. Mauris nunc dui, lobortis vel tincidunt in, varius ac sapien. Nullam a felis ut mauris rutrum vehicula nec ut nunc. Sed dapibus elit cursus neque sodales suscipit et sed enim. Vivamus viverra orci eget massa placerat sed malesuada dolor luctus. Suspendisse sem felis, faucibus at vestibulum vitae, bibendum dictum enim. Donec et vehicula massa. Ut sit amet risus turpis. Vestibulum id nibh mi, eget luctus lacus.
​
Nullam felis mi, aliquam vitae ultrices sed, pellentesque id velit. In viverra consectetur viverra. Maecenas et nisl enim, id scelerisque enim. Phasellus condimentum sem in lectus pulvinar pretium. Aliquam erat volutpat. Etiam condimentum cursus velit in faucibus. Suspendisse adipiscing condimentum dapibus. Ut ultrices commodo porttitor. Aliquam commodo massa nec mauris blandit sit amet ultricies magna tempus. Praesent consectetur accumsan orci et consectetur.
​
Nullam sed nibh urna. Ut leo metus, malesuada nec fermentum at, convallis sit amet elit. Nunc viverra, dolor vel sagittis blandit, dui purus aliquet erat, sit amet egestas odio metus vitae metus. Vestibulum ipsum risus, mollis et vulputate a, dignissim non felis. Fusce cursus consequat urna eget tempor. Nullam a lacus risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ultrices placerat erat, at dignissim purus gravida dignissim. Aenean in neque in nulla ullamcorper pellentesque. Proin magna dolor, placerat at accumsan ut, sollicitudin at enim. Ut eu sapien a quam accumsan viverra. Aenean ut tortor mollis turpis mattis vulputate.
​
Phasellus sagittis orci nec dolor vestibulum at auctor urna convallis. Vestibulum nec turpis quam, nec iaculis felis. Mauris gravida, purus a dapibus mattis, metus metus varius nisi, a adipiscing justo enim vel leo. Morbi massa purus, consequat ut hendrerit eget, varius in turpis. Maecenas vestibulum elementum urna, et ornare quam semper nec. Mauris sagittis magna et nulla pretium mollis. Morbi metus tellus, scelerisque ut luctus ut, tincidunt a odio. Aenean vel mi ligula.
​
Fusce congue lacinia ligula, vitae pharetra nulla aliquet nec. Aenean gravida, magna id elementum ullamcorper, dui ante auctor tortor, non facilisis magna nibh sit amet elit. Ut fringilla commodo lacinia. Praesent et nisl non lorem congue pellentesque quis quis erat. Nulla sit amet nisi quis erat bibendum tincidunt. Maecenas eu sem sem, sed fermentum est. Donec fringilla, massa id rhoncus varius, urna felis convallis magna, sodales scelerisque massa elit vitae tortor. Aliquam erat volutpat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
​
Fusce eu enim non lacus imperdiet rutrum. Quisque congue tortor ac urna sagittis ultricies. Quisque nisi purus, pretium sed interdum eu, congue ac urna. Fusce sit amet magna magna, sit amet blandit dui. Sed elementum leo a nibh semper faucibus. Phasellus nec ultrices eros. Mauris erat elit, feugiat non convallis non, laoreet sit amet erat. Nullam eu dui eu risus ultrices sagittis vitae ut mi. Vivamus tempor egestas nunc, at volutpat quam porttitor eu.
</p>
</body>
</html>
 
​
 
$(document).ready(function () {
    $('#login_form_wrapper').blurEffect("toggle", true, 0);
​
    $('#myButton').click(function () {
        $('#blurred_bg').addClass('page_blurred_bg');
​
        $('#login_form_wrapper').removeClass('hidden');
​
        $('body').blurEffect("toggle", true, 10);
​
        $('#login_form_wrapper').blurEffect("toggle", true, 10);
    });
​
    $('#loginForm').submit(function (e) {
        $('#blurred_bg').removeClass('page_blurred_bg');
​
        $('#login_form_wrapper').addClass('hidden');
​
        $('body').blurEffect("toggle", true, 10);
        $('#login_form_wrapper').blurEffect("toggle", true, 10);
​
        return false;
    });
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers