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="text">
    Click the button below to show a gray screen and make a white modal come down from the top. You'll need to:
    <ul>
      <li>Add 2 CSS rulesets</li>
      <li>Fill in the jQuery</li>
      <li>Do one more thing</li>
    </ul>
    For extra credit, make the modal close button work.
    <br><br>
    <button class="show-it">Show me a modal!</button>
    
    <br><br><a href="http://jsbin.com/OPiBagE/1/edit" target="_blank">Answer</a>
​
</div>
  
  
  <div class="screen">
  </div>
  <div class="modal">
      It doesn't matter what comes, fresh goes better in life, with Mentos fresh and full of Life!
    <br>
    <button class="close-it">Close</button>
  </div>
 
</body>
</html>
 
html, body {
  height: 100%;
  background: fuchsia;
  font-family: Helvetica;
}
​
.text {
  padding: 0 10%;
  max-width: 600px;
  color: white;
  font-size: 20px;
  margin: 0 auto;
}
​
button {
  font-size: 15px;
}
​
.screen {
  display: none;
}
​
.modal {
  top: -200px;
  position: absolute;
  z-index: 1000;
  left: 50%;
  margin-left: -100px;
  color: purple;
  background: white;
  width: 200px;
  border-radius: 10px;
  padding: 10px;
}
​
div.screen {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(0,0,0,.8);
}
Output

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

Dismiss x
public
Bin info
santheopro
0viewers