xwzPlugin---confirmAndAlert

作者：LoveEmperor

1.js插件代码

(function($) {
// xwzPlugin---confirm
   $.alerts = {
      alert: function(title, message, callback) {
         if( title == null ) title = 'Alert';
         $.alerts._show(title, message, null, 'alert', function(result) {
            if( callback ) callback(result);
         });
      },

      confirm: function(title, message, callback) {
         if( title == null ) title = 'Confirm';
         $.alerts._show(title, message, null, 'confirm', function(result) {
            if( callback ) callback(result);
         });
      },


      _show: function(title, msg, value, type, callback) {

         var _html = "";

         _html += '<div id="xwz_box"></div><div id="xwz_con"><span id="xwz_tit">' + title + '</span>';
         _html += '<div id="xwz_msg">' + msg + '</div><div id="xwz_btnbox">';
         if (type == "alert") {
            _html += '<input id="xwz_btn_ok1" type="button" value="确定" />';
         }
         if (type == "confirm") {
            _html += '<input id="xwz_btn_ok" type="button" value="确定" />';
            _html += '<input id="xwz_btn_no" type="button" value="取消" />';
         }
         _html += '</div></div>';

         //必须先将_html添加到body，再设置Css样式
         $("body").append(_html); GenerateCss();

         switch( type ) {
            case 'alert':

               $("#xwz_btn_ok1").click( function() {
                  $.alerts._hide();
                  callback(true);
               });
               $("#xwz_btn_ok1").focus().keypress( function(e) {
                  if( e.keyCode == 13 || e.keyCode == 27 ) $("#xwz_btn_ok").trigger('click');
               });
               break;
            case 'confirm':

               $("#xwz_btn_ok").click( function() {
                  $.alerts._hide();
                  if( callback ) callback(true);
               });
               $("#xwz_btn_no").click( function() {
                  $.alerts._hide();
                  if( callback ) callback(false);
               });
               $("#xwz_btn_no").focus();
               $("#xwz_btn_ok, #xwz_btn_no").keypress( function(e) {
                  if( e.keyCode == 13 ) $("#xwz_btn_ok").trigger('click');
                  if( e.keyCode == 27 ) $("#xwz_btn_no").trigger('click');
               });
               break;


         }
      },
      _hide: function() {
         $("#xwz_box,#xwz_con").remove();
      }
   }
   // Shortuct functions
   xwzalert = function(title, message, callback) {
      $.alerts.alert(title, message, callback);
   }

   xwzconfirm = function(title, message, callback) {
      $.alerts.confirm(title, message, callback);
   };


   //生成Css
   var GenerateCss = function () {

      $("#xwz_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',
         filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6'
      });

      $("#xwz_con").css({ zIndex: '999999', width: '55%', position: 'fixed',
         backgroundColor: 'White'
      });

      $("#xwz_tit").css({ display: 'block', fontSize: '14px', color: 'white', padding: '10px 15px',
         backgroundColor: 'rgb(56,126,245)',
         fontWeight: 'bold'
      // borderBottom: '3px solid #009BFE',
      });

      $("#xwz_msg").css({ padding: '20px', lineHeight: '20px',
          fontSize: '13px'
      // borderBottom: '1px dashed #DDD',
      });

      $("#xwz_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px',
         border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',
         lineHeight: '16px', cursor: 'pointer',  fontFamily: '微软雅黑'
      });

      $("#xwz_btnbox").css({  textAlign: 'center' });
      $("#xwz_btn_ok1").css({width: '100%', height: '35px', color: 'white', border: 'none',backgroundColor: "rgba(56,126,245,0.9)" });
      $("#xwz_btn_ok,#xwz_btn_no").css({ width: '50%', height: '30px', color: 'white', border: 'none' });
      $("#xwz_btn_ok").css({ backgroundColor: "rgba(56,126,245,0.9)" });
      $("#xwz_btn_no").css({ backgroundColor: "rgba(50,205,94,0.9)"});
      // true #387EF5
      // false rgba(50,205,94,0.79)

      //右上角关闭按钮hover样式
      $("#xwz_ico").hover(function () {
         $(this).css({ backgroundColor: 'Red', color: 'White' });
      }, function () {
         $(this).css({ backgroundColor: '#DDD', color: 'black' });
      });

      var _widht = document.documentElement.clientWidth; //屏幕宽
      var _height = document.documentElement.clientHeight; //屏幕高

      var boxWidth = $("#xwz_con").width();
      var boxHeight = $("#xwz_con").height();

      //让提示框居中
      $("#xwz_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });
   }


})(jQuery);

2.页面调用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport"
        content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
   <title>jq-each遍历</title>
   <script type="text/javascript" src="../resources/js/bin/jquery.min.js"></script>
</head>
<body>
<div id="title"></div>

<input id="oneAlert" type="button" value="支付" />
<input id="wxpay" type="button" value="支付" />

</body>
<script type="text/javascript" src="../resources/js/myConfirm.js"></script>
<script language="javascript" type="text/javascript">

// window.confirm("ddd");
   var data = {"list":[{"id":1,"content":"人生在世"},{"id":2,"content":"哪能没曲折"}]};
   var str1 = '';
   var str2 = '';
   $.each(data.list, function(i, item) {

      console.log(item.id);

      str1 += '<p>'+data.list[i].id+data.list[i].content+'</p>';

      $("#title").html(str1)
   });

   //-------------------------
   $("#wxpay").bind("click", function () {

      xwzconfirm('微信支付','请确认微信支付是否完成',function(r){
         if(r)
         {
            //确定
         }
      });
   });

   $("#oneAlert").bind('click',function () {
      xwzalert('微信支付','请确认微信支付是否完成',function(r){
         if(r)
         {
            //确定
         }
      });
   })

</script>
</html>

3.效果图