警告 dialog

dialog插件是一个屏幕居中聚焦的对话框插件，拥有 alert和 confirm两种形式。

代码演示

call dialog-alert call dialog-confirm call dialog-prompt

一般使用

触发 dialog ，进行一些行为确认。

          // 输出记录
function mark(text) {
  $('.J-memo').append($('<p>'+text+'</p>'));
}

$('.J-dialog-0').click(function(){
  $.dialog({
    title:'提示：',
    content:'<div style="padding:10px 0 20px;">内容区域支持HTML，方便调整你需要的样式</div>',
    type:'alert',
    closeBtn:true,
    before:function(deferred){
       mark('[before]函数触发');
    },
    confirm:function(deferred){
       mark('[confirm]函数触发');
       mark('确认按钮点击，窗口关闭');
       deferred.hideDialog();
    },
    cancel:function(deferred){
       mark('[cancel]函数触发');
       mark('取消按钮点击，窗口关闭');
    }
  });
});


$('.J-dialog-1').click(function(){
  $.dialog({
    title:'提示：',
    content:'<div style="padding:10px 0 20px;">内容区域支持HTML，方便调整你需要的样式</div>',
    type:'confirm',
    closeBtn:true,
    before:function(deferred){
       mark('[before]函数触发');
    },
    confirm:function(deferred){
       mark('[confirm]函数触发');
       mark('确认按钮点击，窗口关闭');
       deferred.hideDialog();
    },
    cancel:function(deferred){
       mark('[cancel]函数触发');
       mark('取消按钮点击，窗口关闭');
    }
  });
});



$('.J-dialog-2').click(function(){
  $.dialog({
    title:'提示：',
    content:'<div class="form-group">' +
              '<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">' +
            '</div>',
    type:'alert',
    closeBtn:true,
    before:function(deferred){
       mark('[before]函数触发');
    },
    confirm:function(deferred){
       mark('[confirm]函数触发');
       mark('确认按钮点击，窗口关闭');
       deferred.hideDialog();
    },
    cancel:function(deferred){
       mark('[cancel]函数触发');
       mark('取消按钮点击，窗口关闭');
    }
  });
});
          
      

API

属性	说明	类型	默认值
title	设置标题	string	-
content	设置内容	string	-
confirmText	设置确定按钮文本	string	‘确定’
cancelText	设置取消按钮文本	string	‘取消’
closeBtn	是否开启关闭按钮	boolean	true
shadow	是否开启阴影	boolean	true
type	设置类型，可选设置为`alertconfirm`区别在于有无’取消按钮’	string	`alert`
status	设置类型，可选设置为`successerrorwarninginfo`或者不设	string	-
before	弹出前触发	function	-
confirm	点击确认按钮后触发	function	-
cancel	点击取消按钮后触发	function	-

注意

需要引入./src/{pc|mobile}/dialog.scss样式

如果您发现本页有什么问题，欢迎来提单 Issue : https://github.com/Janking/infinite-ui/issues