自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框、提示框。后续功能扩展、bug修改再更新。

;(function($){
 //默认参数
 var PARAMS;
 var DEFAULTPARAMS = 
     {
      width: 500,
      title: '提示消息',
      content: '',
      okbtn: '确定',
      cancelbtn: '取消',
      headerBackground: 'info',
      vbackdrop: 'static',  //默认点击遮罩不会关闭modal
      vkeyboard: true,   //按esc关闭modal
      confirmFn: new Object,
      cancelFn: new Object
     };
 $.dialog = {
  confirm: function(params){
   $.dialog.initParmas(params);
   $.dialog.Show('confirm', function(e){
    if($.isFunction(PARAMS.confirmFn)){
     PARAMS.confirmFn(e);
    }
   }, 
   function(f){
    if($.isFunction(PARAMS.cancelFn)){
     PARAMS.cancelFn(f);
    }
   });
  },
  alert: function(params){
   $.dialog.initParmas(params);
   $.dialog.Show('alert', function(e){
    if($.isFunction(PARAMS.confirmFn)){
     PARAMS.confirmFn(e);
    }
   }, null);
  },
  Show: function(type, confirmCaller, cancelCaller){
   var html = '<div class="modal fade" id="tipModal">'
      + '<div class="modal-dialog" style="width:'+PARAMS.width+'px"><div class="modal-content">'
      + '<div class="modal-header header_'+PARAMS.headerBackground+'">'
      + '<a class="close" data-dismiss="modal">&times;</a>'
      + '<h4 class="modal-title text-center">'+PARAMS.title+'</h4></div>'
      + '<div class="modal-body text-center body_content">'+PARAMS.content+'</div>'
      + '<div class="modal-footer">';
   if(type=='confirm'){
    html += '<button class="btn btn-default" id="btnCancel">'+PARAMS.cancelbtn+'</button>';
   }
   html += '<button class="btn btn-primary" id="btnOk">'+PARAMS.okbtn+'</button>';
   html += '</div></div></div></div>';
   $('body').append(html);
   $('#tipModal').modal({backdrop:PARAMS.vbackdrop,keyboard:PARAMS.vkeyboard});
   $.dialog.setDialogEvent(type, confirmCaller, cancelCaller);
  },
  initParmas: function(params){
   if(params!= undefined && params!= null){
    PARAMS = $.extend({}, DEFAULTPARAMS, params);
   }
  },
  setDialogEvent: function(type, confirmCaller, cancelCaller){
   switch(type){
    case 'confirm':
     $("#btnOk").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('hidden.bs.modal', function(){
       $('#tipModal').remove();    //要先remove modal
       if($.isFunction(confirmCaller)){
        confirmCaller(true);
       }
       
      });
     });
     $("#btnCancel").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('hidden.bs.modal', function(){
       $('#tipModal').remove();
       if($.isFunction(cancelCaller)){
        cancelCaller(false);
       }
       
      });
     });
     break;
    case 'alert':
     $("#btnOk").click(function(){
      $('#tipModal').modal('hide');
      $('#tipModal').on('hidden.bs.modal', function(){
       $('#tipModal').remove();
       if($.isFunction(confirmCaller)){
        confirmCaller(true);
       }
      });
     });
     break;
   };
   $('#tipModal').on('hidden.bs.modal', function(){
    $('#tipModal').remove();
   });
   $("#tipModal .close").click(function(){
    $('#tipModal').on('hidden.bs.modal', function(){
     $('#tipModal').remove();
    });
   });
   //设置窗口可拖动
   $('#tipModal .modal-header').Draggable($('#tipModal .modal-dialog'));
  }
 };

 dialogConfirm = function(params){
  $.dialog.confirm(params);
 };

 dialogAlert = function(params){
  $.dialog.alert(params);
 };
})(jQuery);

//拖动层
;(function($){
 $.fn.extend({
  Draggable: function(objMoved){
   return this.each(function(){
    //鼠标按下时的位置
    var mouseDownPosiX, mouseDownPosiY;
    //obj的初始位置
    var objPosiX, objPosiY;
    //鼠标移动的距离
    var tempX, tempY;
    //移动的对象
    var obj = $(objMoved)==undefined "left").replace("px", "");
     objPosiY = obj.css("top").replace("px", "");
    }).mouseup(function(){
     status = false;
    }); 
    $(document).mousemove(function(e){
     if(status){
      tempX = parseInt(e.pageX) - parseInt(mouseDownPosiX) + parseInt(objPosiX);
      tempY = parseInt(e.pageY) - parseInt(mouseDownPosiY) + parseInt(objPosiY);
      obj.css({ "left": tempX + "px", "top": tempY + "px" }); 
     }
     //判断是否超出窗体
     //计算出弹出层距离右边的位置
     var dialogRight = parseInt($(window).width())-(parseInt(obj.css("left"))+parseInt(obj.width()));
     var dialogBottom = parseInt($(window).height())-(parseInt(obj.css("top"))+parseInt(obj.height()));
     var maxLeft = $(window).width()-obj.width();
     var maxTop = $(window).height()-obj.height();
     if(parseInt(obj.css("left"))<=0){
       obj.css("left","0px"); 
     }
     if(parseInt(obj.css("top"))<=0){
      obj.css("top","0px"); 
     }
     if(dialogRight<=0){
      obj.css("left",maxLeft+'px'); 
     }
     if(dialogBottom<=0){
      obj.css("top", maxTop+'px');
     }
    }).mouseup(function(){
     status = false;
    }).mouseleave(function(){
     status = false;
    });
   });
  }
 });
})(jQuery)

html页面中调用:

<body>
<div class="box">
 <button class="btn btn-default" id="btn_confirm">确认框</button>
 <button class="btn btn-default" id="btn_cancel">提示框</button>
</div>
</body>
<script src="/UploadFiles/2021-04-02/jquery.min.js">

感觉写的不是很好,后面修改了或者扩展了功能再更新。源码会上传到文件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

风云阁资源网 Design By www.bgabc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
风云阁资源网 Design By www.bgabc.com

稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!

昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?