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>
  <script src="http://jsbin.com/jiyuqe/1.js"></script>
  <script src="http://jsbin.com/jiyuqe/4.js"></script>
  <link href="https://file.myfontastic.com/MkJ2E7o7GzWyuVyYazBFsc/icons.css" rel="stylesheet">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
​
<body>
  <div style="margin-left: 200px;">
    <p><a data-confirm href="aaa">Confirm</a>
    </p>
    <p><a data-confirm href="aaa">Confirm</a>
    </p>
    <p><a data-confirm href="aaa">Confirm</a>
    </p>
    <p><a data-confirm href="aaa">Confirm</a>
    </p>
    <p><a data-confirm href="aaa">Confirm</a>
    </p>
  </div>
</body>
​
</html>
 
#confirm {
  position: absolute;
  height: auto;
  border: 1px #230D33 solid;
  z-index: 1000;
  display: inline-block;
  overflow: hidden;
  text-indent: 0;
  box-sizing: border-box;
  background: #f9f0ff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
​
  .content {
    padding: 2px 8px;
    display: inline-block;
    font-size: 12px;
    line-height: 24px;
    overflow: hidden;
    width: 250px;
    box-sizing: border-box;
  }
  
  .conflink {
    display: inline-block;
  }
  
  a {
    width: 100%;
    color: #333;
    font-size: 20px;
    text-decoration: none;
    margin-left: 1em;
    outline-color: #EAC9FF;
  }
​
  a[role="ok"]:hover {
    color: forestgreen;
  }
  
  a[role="cancel"]:hover {
    color: #C22;
  }
}
 
(($, window) ->
  window.Confirm =
    name: 'confirm'
    version: '{{version}}'
    config:
      speed: 200
    
    init: (scope) ->
      self = this
      @scope = scope
      if $('body').has('#confirm').length == 0
        @confirm = $('<section id="confirm"></section>').appendTo('body').hide()
        @confirm_content = '<span class="content">{{message}}?<span class="conflink"><a href="#" role="ok" data-icon="B"></a><a href="#" role="cancel" data-icon="A"></a></span></span>'
      $(@scope).off('.confirm').on 'click.confirm', '[data-confirm]', (e) ->
        self.toggle e.target
        e.preventDefault()
        return
      $('body').off('.confirm').on('click.confirm', (e) ->
        if $(e.target).is('[data-confirm]')
          return
        self.hide()
      ).on 'keypress.confirm', (e) ->
        if e.keyCode == 27
          return self.hide()
        return
      $(@confirm).off('.confirm').on 'click.confirm', (e) ->
        e.stopPropagation()
      return
    
    show: (el) ->
      message = $(el).data('action') || 'Confirm'
      confirm = templayed(@confirm_content)({'message':message})
      $(@confirm).html(confirm).insertAfter(el).hide()
      width = '250px'#$(@confirm).width()
      $(@confirm).css('width', 0).show().animate({'width':width}, 200)
      
    
    hide: ->
      self = this
      setTimeout (->
        if !$(self.confirm).hasClass('f-dropped')
          $(self.confirm).hide()
        return
      ), 70
      $(@confirm).removeClass 'f-dropped'
    
    toggle: (el) ->
      @show el
      return
      
  return
) Zepto, window
Confirm.init document
​
Output

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

Dismiss x
public
Bin info
ekklpro
0viewers