tmdialog.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. /****************************************************************
  2. * *
  3. * 代码库 *
  4. * www.dmaku.com *
  5. * 努力创建完善、持续更新插件以及模板 *
  6. * *
  7. ****************************************************************/
  8. function tm_dialoag(options){
  9. var defaults = {
  10. title:"提示",
  11. content:"请输入内容 !",
  12. width:400,
  13. height:200,
  14. sureText:"确定", cancleText:"取消",
  15. showButton:true,
  16. callback:function(){}
  17. };
  18. var opts = $.extend({},defaults,options);
  19. /**初始化拖拽**/
  20. $("body").append("<div class='b_l w460 popanimate' id='dialogbox'>"+
  21. " <div class='bcom_ti'>"+
  22. " <a href='javascript:void(0);' class='bide layer_icon close fr'></a> <span>"+opts.title+"</span>"+
  23. " </div>"+
  24. " <div class='bcom_cent'>"+
  25. " <p class='bcomti'>"+opts.content+"</p>"+
  26. " <p class='bcoma'>"+
  27. " <a href='javascript:void(0);' class='bc_abut1 sure'>"+opts.sureText+"</a>"+
  28. " <a href='javascript:void(0);' class='bc_abut2 close'>"+opts.cancleText+"</a>"+
  29. " </p>"+
  30. " </div>"+
  31. "</div>").append("<div class='tmui-overlay'></div>");
  32. /**如果你是要动态添加元素的时候绑定样式,事件必须要在元素附加成功以后在操作**/
  33. $("#dialogbox").tmDrag({"handle":".bcom_ti"});
  34. var $dialog = $("#dialogbox");
  35. if(!opts.showButton)$dialog.find(".bcoma").remove();
  36. var contentHeight = opts.height-160;
  37. $dialog.find(".bcomti").css({"height":contentHeight,"lineHeight":contentHeight+"px"});
  38. $dialog.width(opts.width);
  39. $dialog.height(opts.height);
  40. tm_center_dialog($dialog);
  41. /**关闭按钮绑定点击事件**/
  42. $dialog.find(".close").click(function(){
  43. $dialog.next().remove();//删除遮罩层
  44. $dialog.slideUp("fast",function(){
  45. $(this).remove();
  46. });
  47. if(opts.callback)opts.callback(false);
  48. });
  49. $dialog.find(".sure").click(function(){
  50. $dialog.next().remove();//删除遮罩层
  51. $dialog.slideUp("fast",function(){
  52. $(this).remove();
  53. });
  54. if(opts.callback)opts.callback(true);
  55. });
  56. /**窗口resize**/
  57. $(window).resize(function(){
  58. tm_center_dialog($dialog);
  59. });
  60. };
  61. /**层居中**/
  62. function tm_center_dialog($dialog){
  63. var windowWidth = $(window).width();
  64. var windowHeight = getClientHeight();
  65. var dialogWidth = $dialog.width();
  66. var dialogHeight = $dialog.height();
  67. // var left = (windowWidth-dialogWidth)/2;
  68. // var top = (windowHeight-dialogHeight)/2;
  69. $dialog.css({left:"40%",top:"40%,"});
  70. };
  71. function getClientHeight() {
  72. var clientHeight = 0;
  73. if (document.body.clientHeight && document.documentElement.clientHeight) {
  74. clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight
  75. : document.documentElement.clientHeight;
  76. } else {
  77. clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight
  78. : document.documentElement.clientHeight;
  79. }
  80. return clientHeight;
  81. };