Hot For Coding
基于jQuery写的一个Dialog插件

基于jQuery写的一个弹窗插件,功能简陋,效果单一,主要是是用jQuery的animate函数做同时滑动淡出淡入效果

JavaScript Code

(function($) {
  $.fn.dialog = function (param) {
    if (typeof param.dialog === 'undefined') {
      return;
    }

    var dialog = param.dialog;
    var close = param.close || '.close';
    var speed = 400;
    var margin_left = '-'+parseInt($(dialog).width()/2)+'px';
    var margin_top = '-'+parseInt($(dialog).height()/2)+'px';
    var _this = null; 
    var bg = '<div class="dialog_bg" style="width:100%;height:'+$(document).height()+'px;background:#000;opacity:0.7;filter:alpha(opacity=70);  position:absolute;left:0;top:0;z-index:2147483600;display:none;"></div>';

    $(dialog).css({
      position: 'fixed',
      'margin-left': margin_left,
      'margin-top': margin_top,
      left: '50%',
      top:'50%',
      display: 'none',
      'z-index': 2147483601
    });

    $('body').append(bg);

    $(this).each(function(){
      _this = $(this);
      _this.click(function(){
        if (!$(dialog).is(':visible')) {
          $('.dialog_bg').fadeIn(parseInt(speed/2));
          $(dialog).css({'top':'35%','display':'block','opacity':0.0});
          $(dialog).animate({top:'50%',opacity:1},speed);
        }
      });

      $(dialog+' '+close).click(function(){
        $(dialog)
          .animate({
            top: '65%',
            opacity:0
          },speed,false,function() {
            $(this)
              .hide()
              .css('top','50%');
            $('.dialog_bg').fadeOut(parseInt(speed/2));
          });
      });
    });
  }
   
})(jQuery);

函数用法

HTML


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />  
  </head>
  <body>
    <button class="show-dialog-btn">Open the dialog</button>
    <div class="dialog" style="width:500px;height:200px;background:#ccc;display:none;">
      <a class="close" href="javascript:void(0);">关闭</a>  
    </div>
  </body>

  <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="dialog.js"></script>
  <script type="text/javascript">   
    $('.show-dialog-btn').dialog({dialog:'.dialog', close:'.close'}); 
  </script>
</html>

TITLE: 基于jQuery写的一个Dialog插件

LINK: https://www.qttc.net/290_jquery_dialog_plugin.html

NOTE: 转载内容请注明出处