大家都知道, javascript 原生的alert和confirm在手机端尤其是ios系统的手机上显示不够友好，会出现网站域名，提示ok等等,因此我们可以自定义修改其中的样式和方法，提高用户体验性。

js代码（common.js）

(function($) {        $.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="mb_box"></div><div id="mb_con"><span id="mb_tit">' + title + '</span>';  _html += '<div id="mb_msg">' + msg + '</div><div id="mb_btnbox">';  if (type == "alert") {  _html += '<input id="mb_btn_ok" type="button" value="确定" />';  }  if (type == "confirm") {  _html += '<input id="mb_btn_no" type="button" value="取消" />';  _html += '<input id="mb_btn_ok" type="button" value="确定" />';  }  _html += '</div></div>';  //必须先将_html添加到body，再设置Css样式  $("body").append(_html); GenerateCss();  switch( type ) {  case 'alert':  $("#mb_btn_ok").click( function() {  $.alerts._hide();  callback(true);  });  $("#mb_btn_ok").focus().keypress( function(e) {  if( e.keyCode == 13 || e.keyCode == 27 ) $("#mb_btn_ok").trigger('click');  });  break;  case 'confirm':  $("#mb_btn_ok").click( function() {  $.alerts._hide();  if( callback ) callback(true);  });  $("#mb_btn_no").click( function() {  $.alerts._hide();  if( callback ) callback(false);  });  $("#mb_btn_no").focus();  $("#mb_btn_ok, #mb_btn_no").keypress( function(e) {  if( e.keyCode == 13 ) $("#mb_btn_ok").trigger('click');  if( e.keyCode == 27 ) $("#mb_btn_no").trigger('click');  });  break;}  },  _hide: function() {  $("#mb_box,#mb_con").remove();  }  }  // Shortuct functions  myAlert = function(title, message, callback) {  $.alerts.alert(title, message, callback);  }  myConfirm = function(title, message, callback) {  $.alerts.confirm(title, message, callback);  };  //生成Css  var GenerateCss = function () {  $("#mb_box").css({ width: '100%', height: '100%', zIndex: '99999', position: 'fixed',  filter: 'Alpha(opacity=60)', backgroundColor: 'black', top: '0', left: '0', opacity: '0.6'  });  $("#mb_con").css({ zIndex: '999999', width: '350px',height:'200px', position: 'fixed',  backgroundColor: 'White',  });  $("#mb_tit").css({ display: 'block', fontSize: '14px', color: '#444', padding: '10px 15px',  backgroundColor: '#fff', borderRadius: '15px 15px 0 0',  fontWeight: 'bold'  });  $("#mb_msg").css({ padding: '20px', lineHeight: '40px', textAlign:'center', fontSize: '18px' ,color:'#4c4c4c' });  $("#mb_ico").css({ display: 'block', position: 'absolute', right: '10px', top: '9px',  border: '1px solid Gray', width: '18px', height: '18px', textAlign: 'center',  lineHeight: '16px', cursor: 'pointer', borderRadius: '12px', fontFamily: '微软雅黑'  });  $("#mb_btnbox").css({ margin: '15px 0px 10px 0', textAlign: 'center' });  $("#mb_btn_ok,#mb_btn_no").css({ width: '80px', height: '30px', color: 'white', border: 'none', borderRadius:'4px'});  $("#mb_btn_ok").css({ backgroundColor: '#41a259' });  $("#mb_btn_no").css({ backgroundColor: 'gray', marginRight: '40px' });  //右上角关闭按钮hover样式  $("#mb_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 = $("#mb_con").width();  var boxHeight = $("#mb_con").height();  //让提示框居中  $("#mb_con").css({ top: (_height - boxHeight) / 2 + "px", left: (_widht - boxWidth) / 2 + "px" });  }  })(jQuery);

Html调用（test.html）

<html>
<head><meta charset="utf-8"/><script src="js/jquery.min.js"></script><script src="js/alert.js"></script>
</head>
<body>
<div id="updateDiv" class="display_none"><input id="alert" type="button" value="Alert" />  <input id="confirm" type="button" value="Confirm" />
</div>
</body>
</html>
<script type="text/javascript">    $("#alert").bind("click", function () {   myAlert('系统提示','登录成功！',function(){   //要回调的方法  window.location.href="http://www.baidu.com"});  });  $("#confirm").bind("click", function () {   myConfirm('系统确认框','登录之后才能查看！',function(r){  if(r){  //...点确定之后执行的内容  window.location.href="http://www.baidu.com"  }  });       });  alert("消息提示",1,function(r){if(r){}});</script>

效果预览

!!!

参考博客：http://blog.csdn.net/shiyuqiong/article/details/51583811

jQuery修改alert ，confirm的样式相关推荐

jQuery修改!important的css样式jQuery修改css未生效
当我们使用jQuery修改带有!important的css样式或者jQuerycss样式未生效可尝试以下解决办法 1.解决办法原有代码: <!DOCTYPE html> <html ...
jquery.alerts.js模拟js的alert,confirm的插件
为什么80%的码农都做不了架构师?>>> 在http://www.aceona.com/网站发现的模拟alert confirm的插件. http://labs.abeauti ...
如何使用jquery修改css中带有!important的样式属性
<div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{width: ...
给Jquery添加alert,prompt方法，类似系统的Alert，Prompt，可以响应键盘，支持拖动...
我们在调用系统的Alert,prompt的弹出提示时,不同的系统会有不同的提示框,视觉效果不统一,而且不好看,功能单一,现在我们通过Jquery模拟Alert,prompt,现实统一视觉效果,而且内容 ...
jQuery（三）：样式操作
一.DOM操作分类 DOM Core:任何一种支持DOM的编程语言都可以使用它,例如:getElementById(). HTML-DOM:用于处理HTML文档,例如:document.forms. ...
JQuery的Alert插件介绍
有没有厌倦了原来那alert那个风格,总是一个感叹号.有时使得UE不好,今天我们介绍使用Jquery Alert插件 ,使用它可以用来替换JScript中的alert,confirm,prompt 下 ...
jQuery Mobile中图标icon样式大全ui-icon-*
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有class选项 jQuery Mobile中图标icon样式大全 //ui-icon-action 动作 (一般用于页面跳转切换) ...
JQuery修改对象的属性值
JQuery修改对象的属性值用到的便是JQuery提供的attr方法,获取属性值的基本结构为:$(obj).attr("属性名"):修改属性值的结构为:$(obj).attr(& ...
使用jquery修改display属性
使用jquery修改display相当于修改一个css样式,因为display本身属于一个css属性,jquery修改display很简单,你只要知道如何使用jquery改变css就可以了 displ ...

jQuery修改alert ，confirm的样式

js代码（common.js）

Html调用（test.html）

效果预览

jQuery修改alert ，confirm的样式相关推荐

最新文章

热门文章