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="Attach dialog to body">
  <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>
 
* {
    box-sizing: border-box;
}
​
body {
  font-family: arial;
}
​
a, a:visited {
  color: blue;
  text-decoration: none;
}
​
.content {
  background: #fff;
  min-height: 400px;
  padding: 20px;
}
​
.dialog {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.35);
  padding: 40px;
}
​
.dialogContent {
  background: #fff;
  padding: 40px;
  width: 100%;
  height: 100%;
  
  h2 {
    margin-top: 0;
  }
}
 
var dialog,
    openDialog,
    closeDialog,
    dialogContainer,
    app;
​
dialog = {};
dialog.view = function(ctrl, opts) {
  return m('.dialog', m('.dialogContent', [
    m('h2', opts.text),
    m('a', {
      href:'#',
      onclick: closeDialog
    }, 'Close dialog')
  ]));
};
​
closeDialog = function(e) {
  m.mount(dialogContainer, null);  
};
​
openDialog = function(e, opts) {
  dialogContainer = document.getElementById('dialogContainer');
  if (!dialogContainer) {
    dialogContainer = document.createElement('div');
    dialogContainer.id = 'dialogContainer';
    document.body.appendChild(dialogContainer);
  }
  m.mount(dialogContainer, m.component(dialog, opts));
};
​
app = {};
app.view = function(ctrl, opts) {
    return m('.content', [
       m('p', 'This is regular content'),
       m('a', {
         href:'#',
         onclick: function(e) {
           openDialog(e, {text: 'Opened from link'});
       }}, 'Open dialog')
    ]);
};
m.mount(document.body, app);
Output

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

Dismiss x
public
Bin info
ArthurClemenspro
0viewers