<!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>
