javascript: jquery-confirm.js
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery-confirm.js | The multipurpose alert & confirm</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-3.6.0.js"></script>
<script src="ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel='stylesheet' href='bootstrap/4.6.2/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/main.css">
<!-- Add the minified version of files from the /dist/ folder. -->
<!-- jquery-confirm files -->
<link rel="stylesheet"
type="text/css"
href="ajax/libs/jqueryconfirm/3.3.4/jquery-confirm.css"/>
<script type="text/javascript"
src="ajax/libs/jqueryconfirm/3.3.4/jquery-confirm.js"></script>
<!--<script type="text/javascript"-->
<!--src="dist/jquery-confirm.min.js"></script>-->
<!--END jquery-confirm files-->
<link rel="stylesheet"
id="bs-stylesheet"
href="du/libs/bs3.css">
<link rel="stylesheet"
href="du/libs/bundled.css">
<link rel="stylesheet"
href="du/demo.css">
</head>
<body data-spy="scroll"
data-target=".navbar">
<div class="container">
<h2>Themes</h2>
<p>jquery-confirm comes loaded with themes for all common use cases.</p>
<div class="row">
<div class="col-md-3">
<button class="btn btn-info btn-block example-the-1">Modern</button>
</div>
<div class="col-md-3">
<button class="btn btn-info btn-block example-the-3">Material</button>
</div>
<div class="col-md-3">
<button class="btn btn-info btn-block example-the-4">Bootstrap</button>
</div>
<div class="col-md-3">
<button class="btn btn-info btn-block example-the-2">Supervan</button>
</div>
</div>
</div>
<script type="text/javascript">
/*Supervan风格 透明
https://github.com/craftpip/jquery-confirm
jconfirm.defaults = {
title: 'geovindu',
titleClass: '',
type: 'default',
typeAnimated: true,
draggable: true,
dragWindowGap: 15,
dragWindowBorder: true,
animateFromElement: true,
smoothContent: true,
content: 'Are you sure to continue?',
buttons: {},
defaultButtons: {
ok: {
action: function () {
}
},
close: {
action: function () {
}
},
},
contentLoaded: function(data, status, xhr){
},
icon: '',
lazyOpen: false,
bgOpacity: null,
theme: 'light',
animation: 'scale',
closeAnimation: 'scale',
animationSpeed: 400,
animationBounce: 1,
rtl: false,
container: 'body',
containerFluid: false,
backgroundDismiss: false,
backgroundDismissAnimation: 'shake',
autoClose: false,
closeIcon: null,
closeIconClass: false,
watchInterval: 100,
columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
boxWidth: '50%',
scrollToPreviousElement: true,
scrollToPreviousElementAnimate: true,
useBootstrap: true,
offsetTop: 40,
offsetBottom: 40,
bootstrapClasses: {
container: 'container',
containerFluid: 'container-fluid',
row: 'row',
},
onContentReady: function () {},
onOpenBefore: function () {},
onOpen: function () {},
onClose: function () {},
onDestroy: function () {},
onAction: function () {}
};*/
/*
$.confirm({
title: 'Encountered an error!',
content: 'Something went downhill, this may be serious',
type: 'red',
typeAnimated: true,
buttons: {
tryAgain: {
text: 'Try again',
btnClass: 'btn-red',
action: function(){
}
},
close: function () {
}
}
});*/
$('.example-the-1').on('click', function(){
$.confirm({
icon: 'fa fa-smile-o',
theme: 'modern',
closeIcon: true,
animation: 'scale',
type: 'blue',
});
});
$('.example-the-2').on('click', function(){
$.confirm({
title: '涂聚文!',
content: '你好，Geovin Du',
typeAnimated: true,
icon: 'fa fa-question-circle-o',
theme: 'supervan',
closeIcon: true,
animation: 'scale',
type: 'orange',
});
});
$('.example-the-3').on('click', function(){
$.confirm({
icon: 'fa fa-question',
theme: 'material',
closeIcon: true,
animation: 'scale',
type: 'orange',
});
});
$('.example-the-4').on('click', function(){
$.confirm({
title: 'Encountered an error!',
content: 'Something went downhill, this may be serious',
typeAnimated: true,
icon: 'fa fa-question',
theme: 'bootstrap',
closeIcon: true,
animation: 'scale',
type: 'orange',
});
});
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery-confirm.js | The multipurpose alert & confirm</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/jquery-3.6.0.js"></script>
<script src="ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel='stylesheet' href='bootstrap/4.6.2/css/bootstrap.min.css'>
<link rel="stylesheet" href="css/main.css">
<!-- Add the minified version of files from the /dist/ folder. -->
<!-- jquery-confirm files -->
<link rel="stylesheet"
type="text/css"
href="ajax/libs/jqueryconfirm/3.3.4/jquery-confirm.css"/>
<script type="text/javascript"
src="ajax/libs/jqueryconfirm/3.3.4/jquery-confirm.js"></script>
<!--<script type="text/javascript"-->
<!--src="dist/jquery-confirm.min.js"></script>-->
<!--END jquery-confirm files-->
<link rel="stylesheet"
id="bs-stylesheet"
href="du/libs/bs3.css">
<link rel="stylesheet"
href="du/libs/bundled.css">
<link rel="stylesheet"
href="du/demo.css">
<style type="text/css">
#geovindu{
height: 400px;
width: 200px;
}
</style>
</head>
<body data-spy="scroll"
data-target=".navbar">
<div class="container">
<h2>Themes</h2>
<p>jquery-confirm comes loaded with themes for all common use cases.</p>
<div class="row">
<div class="col-md-3">
<button class="btn btn-info btn-block example-the-1">Modern</button>
</div>
<div class="col-md-3">
<button class="btn btn-info btn-block example-the-3">Material</button>
</div>
<div class="col-md-3">
<button class="btn btn-info btn-block example-the-4">Bootstrap</button>
</div>
<div class="col-md-3">
<button class="btn btn-info btn-block example-the-2">Supervan</button>
</div>
</div>
</div>
<script type="text/javascript">
/*Supervan风格 透明
https://github.com/craftpip/jquery-confirm
jconfirm.defaults = {
title: 'geovindu',
titleClass: '',
type: 'default',
typeAnimated: true,
draggable: true,
dragWindowGap: 15,
dragWindowBorder: true,
animateFromElement: true,
smoothContent: true,
content: 'Are you sure to continue?',
buttons: {},
defaultButtons: {
ok: {
action: function () {
}
},
close: {
action: function () {
}
},
},
contentLoaded: function(data, status, xhr){
},
icon: '',
lazyOpen: false,
bgOpacity: null,
theme: 'light',
animation: 'scale',
closeAnimation: 'scale',
animationSpeed: 400,
animationBounce: 1,
rtl: false,
container: 'body',
containerFluid: false,
backgroundDismiss: false,
backgroundDismissAnimation: 'shake',
autoClose: false,
closeIcon: null,
closeIconClass: false,
watchInterval: 100,
columnClass: 'col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1',
boxWidth: '50%',
scrollToPreviousElement: true,
scrollToPreviousElementAnimate: true,
useBootstrap: true,
offsetTop: 40,
offsetBottom: 40,
bootstrapClasses: {
container: 'container',
containerFluid: 'container-fluid',
row: 'row',
},
onContentReady: function () {},
onOpenBefore: function () {},
onOpen: function () {},
onClose: function () {},
onDestroy: function () {},
onAction: function () {}
};*/
/*
$.confirm({
title: 'Encountered an error!',
content: 'Something went downhill, this may be serious',
type: 'red',
typeAnimated: true,
buttons: {
tryAgain: {
text: 'Try again',
btnClass: 'btn-red',
action: function(){
}
},
close: function () {
}
}
});*/
$('.example-the-1').on('click', function(){
$.confirm({
title: '涂聚文!',
content: '<div id="geovidnu"><img src="images/try.png"/>你好，Geovin Du<br>肚子在叫呢？</div>',
icon: 'fa fa-smile-o',
theme: 'modern',
closeIcon: true,
draggable: true,
dragWindowBorder: false,
animation: 'scale',
type: 'blue',
});
});
$('.example-the-2').on('click', function(){
$.confirm({
title: '涂聚文!',
content: '<img src="images/try.png"/>你好，Geovin Du<br>肚子在叫呢？在贵干呢？以和为贵，和而不同，求同存异',
typeAnimated: true,
icon: 'fa fa-question-circle-o',
theme: 'supervan',
// closeIcon: true,
animation: 'scale',
type: 'orange',
buttons: {
okay: {
text: '确定',
btnClass: 'btn-blue'
}
}
});
});
$('.example-the-3').on('click', function(){
$.confirm({
icon: 'fa fa-question',
theme: 'material',
closeIcon: true,
animation: 'scale',
buttons: {
confirm: function () {
$.alert('Confirmed!');
},
cancel: function () {
//$.alert('Canceled!');
window.open('http://www.dusystem.com');
//return $.get('http://www.dusystem.com');
}
},
type: 'orange',
});
});
$('.example-the-4').on('click', function(){
$.confirm({
title: 'Encountered an error!',
content: 'Something went downhill, this may be serious',
typeAnimated: true,
icon: 'fa fa-question',
theme: 'bootstrap',
closeIcon: true,
animation: 'scale',
type: 'orange',
});
});
</script>
</body>
</html>
$.confirm({
title: '涂聚文!',
content: '<img src="images/try.png"/>你好，Geovin Du<br>肚子在叫呢？在贵干呢？以和为贵，和而不同，求同存异',
typeAnimated: true,
icon: 'fa fa-question-circle-o',
theme: 'supervan',
closeIcon: true,
animation: 'scale',
type: 'orange',
buttons: {
okay: {
text: '确定',
btnClass: 'btngeovindu',
action: function () {
window.open('http://www.dusystem.com');
}
}//,
//cancel: function () {
//$.alert('close!');
//},
}
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文）
浙公网安备 33010602011771号