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 name="description" content="Mithril JS example: opening a modal dialog component from a button click, with fade out">
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mithril/0.2.0/mithril.min.js"></script>
</head>
<body>
</body>
</html>
 
// Largely copied from http://codepen.io/maccadb7/pen/nbHEg
​
//
// Variables
// ----------------------
​
@gray: #333;
@gray-light: #aaa;
@gray-lighter: #eee;
@space: 40px;
@blue: #428bca;
@blue-dark: darken(@blue, 5%);
@fadeOutDuration: 0.5s;
​
body {
  color: @gray;
  font-family: 'Helvetica', arial;
  height: 80em;
}
​
//
// Btn 
// ----------------------
​
.btn {
  background: @blue;
  border: @blue-dark solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
 /* top: 40em;*/
  
  &:hover{
    background: @blue-dark;
  }
  
  &.btn-big{
    font-size: 18px;
    padding: 15px 20px;
    min-width: 100px;
  }
  
}
​
//
// Modal
// ----------------------
​
.modal{
   opacity: 1;
  
  // This is modal bg
  &:before{
    content: ""; 
    //display: none;
    background: rgba(0,0,0,.6);
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0; 
    z-index: 10;
  }  
}
​
// Modal Dialog
// ----------------------
​
.modal-dialog{
  background: #fefefe;
  border: @gray solid 1px;
  border-radius: 5px;
  margin-left: -200px;
  position: fixed; 
  left: 50%;  
  z-index: 11; 
  width: 360px;
}
​
.modal-body{
  padding: @space/2;
}
​
.modal-header,
.modal-footer{
  padding: @space/4 @space/2;
}
​
.modal-header{
  border-bottom: @gray-lighter solid 1px;
  
  h2{
    font-size: 20px;
  }
  
}
​
.modal-footer{
  border-top: @gray-lighter solid 1px;
  text-align: right;
}
​
/*ADDED TO STOP SCROLLING TO TOP*/
#close {
  display: none; 
}
​
.fadeout {
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
-webkit-transition: all @fadeOutDuration ease;
  -moz-transition: all @fadeOutDuration ease;
  -ms-transition: all @fadeOutDuration ease;
  -o-transition: all @fadeOutDuration ease;
  transition: all @fadeOutDuration ease;
}
​
​
​
Output

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

Dismiss x
public
Bin info
ArthurClemenspro
0viewers