jquery-confirm 消息弹出框插件

官方地址及插件下载

写H5页面，有几个按钮点击需跳出一张长图，占全屏，用scroll属性写出来pc鼠标滚轮可向下浏览，移动端点击无效。

改用jquery-confirm插件，该插件包含各种弹框，比较灵活。

根据我的需求，这样写

$. alert({

title: false,

content: '<img src="/bundles/img/h5/table.jpg" alt="">',

columnClass: 'col-sm-12 no-padding',

boxWidth: '100%'

});

第一步 引入css js文件

< link href= "https://cdn.bootcss.com/jquery-confirm/3.2.3/jquery-confirm.min.css" rel= "stylesheet" >

< link rel= "stylesheet" href= "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"

integrity= "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin= "anonymous" >

< link href= "https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel= "stylesheet" >

< script src= "https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js " ></ script >

< script src= "https://cdn.bootcss.com/jquery-confirm/3.2.3/jquery-confirm.min.js " ></ script >

< script src= "https://cdn.bootcss.com/jquery.form/4.2.1/jquery.form.js" ></ script >

第二步 html中定义触发按钮，或者可以在加载页面时弹出弹框（html中就不用定义按钮什么的了）

< button class= 'confirm-btn' >Click </ button >

第三步  定义弹出框 官方demo比较多 可以根据需求找一下

$.alert 简易弹框

< script >

function confirm_alert( msg) {

$. alert({

title: 'Alert!',

content: msg

});

}

$( '.confirm-btn'). click( function(){

confirm_alert( '啦啦啦');

})

< / script >

弹出效果

$.confirm 加按钮的弹出框

< script >

$( '.confirm-btn'). confirm({

title: 'Confirm!',

content: 'Simple confirm!',

buttons: {

confirm : function () {

$. alert( 'Confirmed!');

},

cancel : function () {

$. alert( 'Canceled!');

},

somethingElse: {

text: 'Something else',

btnClass: 'btn-blue',

keys: [ 'enter', 'shift'],

action : function(){

$. alert( 'Something else?');

}

}

}

});

< / script >

弹出效果

$.dialog 一段文字没有点击按钮，有个关闭按钮

< script >

function confirm_alert( msg) {

$. dialog({

title: 'Text content!',

content: msg

});

}

$( '.confirm-btn'). click( function(){

confirm_alert( '啦啦啦');

})

< / script >

点击效果

$.fn.confirm 可以直接绑定元素，如果没有定义buttons的话，会自动添加两个按钮（ok 和 close），

用 this.$target 可以直接获取点击元素。

< a class= "baidu" data-title= "Goto Baidu?" href= "http://baidu.com" >Goto Baidu </ a >

< script >

$( 'a.baidu'). confirm({

buttons: {

hey : function(){

location. href = this. $target. attr( 'href');

}

}

});

< / script >

点击效果

可以简写调用

$. alert( 'Content here', 'Title here');

$. confirm( 'A message', 'Title is optional');

$. dialog( 'Just to let you know');

下面是一些参数属性

Buttons 

$( '.confirm-btn'). confirm({

buttons: {

heyThere: {

text: 'Hey there!', //

btnClass: 'btn-warning',

// btn-default btn-blue btn-green btn-red btn-orange btn-purple btn-dark

keys: [ 'enter', 'a'], // 监测按键

isHidden: false, // initially not hidden

isDisabled: false, // initially not disabled

action : function(){

$. alert( 'You clicked on "heyThere"');

}

},

}

});

还有一些buttons所带的函数    A full list of functions for buttons.

Function	Code	Description
setText	this.buttons.<buttonName>.setText(text)	The text you want to set.
addClass	this.buttons.<buttonName>.addClass(className)	Add a class to the button
removeClass	this.buttons.<buttonName>.removeClass(className)	remove a class to the button
disable	this.buttons.<buttonName>.disable()	Disable the button
enable	this.buttons.<buttonName>.enable()	Enable the button
show	this.buttons.<buttonName>.show()	Show the button via CSS
hide	this.buttons.<buttonName>.hide()	Hide the button via CSS

Customizing

Dialog type

$( '.confirm-btn'). confirm({

title: 'Encountered an error!',

content: 'Something went downhill, this may be serious',

type: 'red', //上边框的颜色 red green orange purple blue dark

typeAnimated: true //颜色的动画(渐变)

});

Icons ---》 font-awesome

$( '.confirm-btn'). confirm({

icon: 'glyphicon glyphicon-heart',

title: 'ahahahhaha'

});

Close icon  右上角是否要关闭按钮   

$. confirm({

closeIcon: true,

closeIconClass: 'fa fa-close'

});

Handle closeIcon's callback 处理关闭按钮回调函数

$. confirm({

closeIcon : function(){

return false; // to prevent close the modal.

// or

return 'aRandomButton'; // set a button handler, 'aRandomButton' prevents close.

},

// or

closeIcon: 'aRandomButton', // set a button handler

buttons: {

aRandomButton : function(){

$. alert( 'A random button is called, and i prevent closing the modal');

return false; // you shall not pass

},

close : function(){

}

}

});

Custom width 弹出框长度定义

可以用bootstrap定义

也可以不用bootstrap定义  ( 下面的是固定长度弹出框 )

  

Draggable

弹框是否可拖动   以及   拖动范围(距离窗口多少像素)

draggable: true,

dragWindowGap: 20 // number of px of distance

Open/Close Animations

一些开关的效果，还可以自定义效果，具体可以看官方文档

animation: 'zoom', // 弹出的效果

closeAnimation: 'scale', //关闭的效果

animationBounce: 1.5, // default is 1.2 whereas 1 is no bounce. 弹框是否有反弹效果

animationSpeed: 500 // 0.5 seconds 速度

1. // right, left, bottom, top, rotate, none, opacity, scale, zoom,
2. // scaleY, scaleX, rotateY, rotateYR (reverse), rotateX, rotateXR (reverse)

Themes

一些场景，自定义场景，具体可以看官方文档

theme: 'supervan' // lignt dark modern supervan material bootstrap