demo.panelalert.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. define({
  2. body: '<div class="container">\
  3. <div class="row">\
  4. <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">\
  5. <div class="panel panel-success">\
  6. <div class="panel-heading">提示对话框</div>\
  7. <div class="panel-body">\
  8. <p>点击“知道了”按钮或者半透明区域可以关闭该对话框</p>\
  9. <p class="text-center"><button type="button" class="btn btn-lg btn-success">知道了</button><p>\
  10. </div>\
  11. </div>\
  12. </div>\
  13. </div>\
  14. </div>\
  15. ',
  16. init: function(panelData) {
  17. var $view = this,
  18. $dialog = $('.panel', $view)
  19. $('.container', $view).trigger('spa:scroll')
  20. //高度居中
  21. // $dialog.css({marginTop: ($view.height() - $dialog.height()) / 2})
  22. // $view.on('click touchstart', 'button', function(event) {
  23. // $view.trigger('spa:closepanel')
  24. // event.stopPropagation()
  25. // event.preventDefault()
  26. // })
  27. },
  28. beforeopen: function(panelData) {
  29. var $view = this
  30. $('.spa-page-bg', $view).css({opacity: 0}).transition({opacity: 0.6})
  31. },
  32. beforeclose: function(panelData) {
  33. var $view = this
  34. $('.spa-page-bg', $view).transition({opacity: 0})
  35. }
  36. })