警告 dialog

dialog插件是一个屏幕居中聚焦的对话框插件,拥有 alertconfirm两种形式。

代码演示

一般使用
触发 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