ไฟล์ที่ต้องการเรียกใช้ :
jquery-x.x.x.min.js --- โหลดได้ที่
โค้ด: เลือกทั้งหมด
http://jquery.com/
confirm.js --- สคริปกล่องยืนยันข้อมูล
confirm.css --- ออกแบบหน้ากล่องยืนยันข้อมูล
ข้อดีในการใช้ jConfirmAction : ใช้งานง่าย และสามารถปรับเปลี่ยนรูปแบบได้ตามชอบ
html :
โค้ด: เลือกทั้งหมด
<!doctype html>
<html>
<head>
<title>jConfirmAction Demo</title>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" type="text/javascript"></script>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="../src/j-confirm-action.js" type="text/javascript"></script>
<link rel="stylesheet" href="../src/j-confirm-action.css">
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #ECF0F0;
font-family: 'Open Sans',Arial, Verdana, sans-serif;
}
.container { margin:150px auto 30px auto;; max-width:960px;}
.demo {
margin: 200px;
}
.text-center {
text-align: center;
}
</style>
</head>
<body>
<h1 class="text-center">jConfirmAction Demo</h1>
<hr>
<br/>
<center><h3>
<a target="_blank" href="#" class="demo-href">Demo</a>
</h3>
</center>
<script type="text/javascript">
(function ($) {
'use strict';
$('.demo-href').jConfirmAction({
question: 'ออกจากหน้านี้ ?',
noText: 'ไม่'
});
$('.demo-callback').jConfirmAction({
question: 'Delete this item?',
yesText: 'Delete',
confirm: function (item) {
//do custom code here , example ajax calls
item.hide(0);
console.log('You clicked YES');
},
cancel: function (item) {
console.log('You clicked NO');
}
});
})(jQuery);
</script>
</body>
</html>
โค้ด: เลือกทั้งหมด
(function ($, window) {
'use strict';
$.fn.jConfirmAction = function (options) {
//Set default options
var defaults = {
question: 'ออกจากหน้านี้ ?',
yesText: 'ใช่',
noText: 'ไม่',
confirm: false,//yes callback
cancel: false, //no callback
};
options = $.extend(defaults, options);
this.bind('click.jConfirmAction', function (evt) {
//Prevent default events
evt.stopPropagation();
evt.preventDefault();
var $this = $(this),
$body = $('body');
//Build up html
var $popUP = $('<div class="jc-box"><span class="jc-question">' + options.question + '</span><br/> <div class="jc-btn-wrap"><span class="jc-yes">' + options.yesText + '</span><span class="jc-no">' + options.noText + "</span></div></div>");
//Some dynamic css
fixPosition($popUP);
$popUP.animate({opacity: .96}, 300);
//Append html next to current item
$body.append($popUP);
//Unbind previous and bind new
$('.jc-yes', $popUP).unbind('click.jConfirmAction').bind('click.jConfirmAction', function () {
//call callback function
if ($.isFunction(options.confirm)) {
options.confirm($this);
} else {
//else redirect
window.location = $this.attr('href')
}
removePopUp();
});
//NO Button click event
$('.jc-no', $popUP).unbind('click.jConfirmAction').bind('click.jConfirmAction', function () {
if ($.isFunction(options.cancel)) {
options.cancel($this);
}
removePopUp()
});
//Change dialog position on resize and scroll event
$(window).on('resize scroll', function (e) {
var jcBox = $('.jc-box:visible');
if (jcBox.length) {
fixPosition(jcBox);
}
});
//Hide any opened dialog if user clicks on body but not on dialog itself
$body.bind('mouseup', function (event) {
var jcBox = $('.jc-box:visible');
if (jcBox.is(event.target) === false && jcBox.has(event.target).length === 0 && jcBox.length) {
removePopUp();
}
});
//Add some dynamic css
function fixPosition($item) {
$item.css({
top: $this.offset().top - $(window).scrollTop() + 40 + 'px',
left: $this.offset().left - $(window).scrollLeft() - 100 + 'px'
})
}
//Remove popup from dom
function removePopUp() {
$popUP.fadeOut(300, function () {
$popUP.remove();
})
}
})
}
})
(jQuery, window);
สามารถดาวน์โหลดได้ที่ : http://www.jqueryscript.net/other/Inlin ... ction.html