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>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="modal_window non_descriptive" id="login_modal_window">
    <div class="viewer" style="width:376px;">
      <a href="#close" class="close" title="close">X</a>
      <div class="modal_heading" style="font-weight:bold;color:#C14E00;">
        Sign In
      </div>
      <form class="modal_container">
        <div>
          <div id="login_credentials_labels">
            <label style="margin-top:8px;">Email:</label>
            <label>Password:</label>
          </div>
          <div id="login_credentials_inputs">
            <input type="text"/>
            <div class="error_message">
              This field is required.
            </div>
            <input type="password"/>
            <div class="error_message">
              This field is required.
            </div>
          </div>
          <!--<div style="clear:both"></div>-->
          <input type="submit" value="Sign In"/>
          <div style="clear:both"></div>
        </div><br/>
        <div>
          <span>
            <input type="checkbox" style="margin-left:0;vertical-align:-1px;"/><label>Remember me</label>
          </span>
          <a href="password_retrieve.php" style="margin-left:150px;">Forgot password?</a>
        </div>
        <div style="margin-top:-19px;">
          <span style="float:left;">
            <input type="checkbox" style="margin-left:0;vertical-align:-1px;"/><label>Remember me</label>
          </span>
          <a href="password_retrieve.php" style="float:right;">Forgot password?</a>
          <div style="clear:both;"></div>
        </div>
      </form>
    </div><!--end of viewer-->
  </div><!--end of modal for photos & videos-->
  <a href="#login_modal_window">open modal</a>
</body>
</html>
 
.error_message
{
  font-family:Arial, Helvetica, sans-serif;
  font-size:10px;
  color:#ff0000;
}
.modal_window
{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.8);
  opacity:0;
  pointer-events:none;
  transition:opacity 400ms ease-in;
  z-index:2;
}
.modal_window:target, .modal_window_active
{
  opacity:1;
  pointer-events:auto;
}
.modal_window .viewer
{
  border:solid 2px #696969;
  border-radius:10px;
  box-shadow:0 0 4px #fff;
  padding:30px 25px 15px;
  margin:5% auto;
  font-family: Arial, Helvetica, sans-serif;
  width:646px;
  background:#ffffff;
}
.modal_window.descriptive .viewer
{
  padding:30px 20px 20px 20px;
  margin:10% auto;
  width:500px;
  background:#FDFDFD;
  color:#333333;
  background: -moz-linear-gradient(#ddd, #FDFDFD);
  background: -webkit-linear-gradient(#ddd, #FDFDFD);
  background: -o-linear-gradient(#ddd, #FDFDFD);
}
.modal_window .modal_heading
{
  font-size: 16px;
  margin-bottom: 30px;
}
.modal_window.non_descriptive .target_name
{
  text-shadow:0px 1px 6px #b7b7b7;
  letter-spacing:1px;
  font-weight:normal;
}
.modal_window .close
{
  float:right;
  border:solid 2px #fff;
  padding:2px 6px;
  border-radius:25px;
  position:relative;
  top:-40px;
  left:35px;
  background:#9A9A9A;
  font-size:16px;
  color:#fff;
  box-shadow:1px 1px 2px #333;
  text-decoration:none;
  outline:none;
}
.modal_window.descriptive .close
{
  left:30px;
}
.modal_window .close:hover
{
  background:#FF7B24;
}
#login_modal_window .modal_container
{
  font-size:14px;
  color:#333333;
}
#login_user_type label
{
  font-weight:bold;
  display:inline-block;
  width:170px;
}
#login_user_type input[type="radio"]
{
  vertical-align:-1px;
}
[id^="login_credentials"]
{
  float:left;
}
#login_credentials_labels label
{
  display:block;
  font-weight:bold;
  width:170px;
  margin-top:26px;
}
#login_credentials_inputs input
{
  display:block;
  height:25px;
  width:184px;
  border: 1px solid #cccccc;
  border-radius:2px;
  padding:0px 10px;
  font-size:15px;
  margin-top:2px;
}
#login_credentials_inputs input:focus
{
  outline:none;
  border-color:#FFC59D;
  box-shadow:0 0 10px #FFC59D;
}
#login_modal_window .error_message
{
  height:13px;
}
#login_modal_window input[type="submit"]
{
  width:100px;
  height:30px;
  background-color:#C14E00;
  border:none;
  color:#fff;
  font-size:16px;
  border-radius:3px;
  cursor:pointer;
  outline:none;
  float:right;      
}
#login_modal_window input[type="submit"]:active
{
  width:96px;
  height:28px;
  position:relative;
  top:1px;
  right:2px;
  box-shadow:0 0 10px #E85C00;
  font-size:15px;
  margin-bottom:2px;
}
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers