Mithril Bootstrap Modal

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.2-rc.1/mithril.min.js"></script>
<script src="//rawgit.com/georapbox/Mithril-Bootstrap-Modal/master/src/mithril_modal.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//rawgit.com/georapbox/Mithril-Bootstrap-Modal/master/src/mithril_modal.css">
<script src="//cdn.plot.ly/plotly-latest.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container" id="main">
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="view"></div>
    </div>
  </div>
</div>

CSS

#main{margin-top: 30px;}
.btn-flat{
  border-radius: 0;
}

CoffeeScript

myModal = new Modal()

bsInput = (d) ->
  m '.form-group',
    m 'label', {for: d.id, class: "col-sm-2 control-label"}, d.label
    m 'div.col-sm-10', m 'input', 
      {type: d.type, class: 'form-control', id: d.id}
      

draw_plot = (el, isInit, ctx) ->
  data = [
    {
      x: ['giraffes', 'orangutans', 'monkeys'],
      y: [20, 14, 23],
      type: 'bar',
      height: 150
    }
  ];
  Plotly.newPlot(el, data);
  
mPlotly = view: (ctrl, props) ->
  m 'div', 
    style: {height: "300px"}
    config: (el, isInit, ctx) ->
      Plotly.newPlot(el, props.data)

data = [
  {
    x: ['giraffes', 'orangutans', 'monkeys'],
    y: [20, 14, 23],
    type: 'bar',
    height: 150
  }
];
 
myPlot = m mPlotly, {data: data} 

app2 = view: ->
  m 'div',
    m '.btn.btn-primary.btn-flat.btn-sm', {
      config: (el, isInit, ctx) -> 
        $(el).popover 
          content: -> "<div id='plot'></plot>"
          html: true
        $(el).on "shown.bs.popover", ->
          Plotly.newPlot("plot", data)
    }, "Click for Popover"

app1 = view: ->
  m 'div', 
    m '.btn.btn-primary.btn-flat.btn-sm', 
      {onclick: myModal.show.bind(myModal)}, "Click for Modal"
    myModal.view
      class: "form-horizontal"
      header: -> m 'h4.modal-title', 'Modal Title'
      body: -> 
        m 'div', myPlot
      footer: -> m 'a.btn.btn-default', 
        {onclick: myModal.hide.bind(myModal)}, "Close"
    
Main = view: ->
  m 'div',
    m app1
    m app2
m.mount document.getElementById('view'), app1