jQuery在線引用:
官網jquery壓縮版引用地址:
3.1.1版本:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
3.0.0版本:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
2.1.4版本:
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
- 百度壓縮版引用地址:
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
- 微軟壓縮版引用地址:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
Bootstrap 在線引用:
Bootstrap 3.3.0 js 文件
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
Bootstrap 3.3.0 css 文件
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
Bootstrap 3.0.3 js 文件
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
Bootstrap 3.0.3 css 文件
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
基於bootstrap和jquery實現刪除框 代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/styles/main.css"/>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="js/confirm.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button" onclick="remove()">刪除</button>
<script type="text/javascript">
/* 調用彈出框 */
window.remove = function(){
Ewin.confirm({ message: "確認要刪除嗎？" }).on(function (e){
if(!e){
alert("刪除成功!");
}
})
}
</script>
</body>
</html>
confirm.js 代碼:
(function ($) {
window.Ewin = function () {
var html = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
'<div class="modal-dialog modal-sm">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
'<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
'</div>' +
'<div class="modal-body">' +
'<p>[Message]</p>' +
'</div>' +
'<div class="modal-footer">' +
'<button type="button" style="background-color: #FF0000;color: #FFFFFF;border:none" class="btn btn-default cancel" data-dismiss="modal">[BtnCancel]</button>' +
'<button type="button" style="background-color: #778899;color: #000000;border:none" class="btn btn-primary ok" data-dismiss="modal">[BtnOk]</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
var dialogdHtml = '<div id="[Id]" class="modal fade" role="dialog" aria-labelledby="modalLabel">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +
'<h4 class="modal-title" id="modalLabel">[Title]</h4>' +
'</div>' +
'<div class="modal-body">' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm');
var generateId = function () {
var date = new Date();
return 'mdl' + date.valueOf();
}
var init = function (options) {
options = $.extend({}, {
title: "溫馨提示",
message: "提示內容",
btnok: "取消",
btncl: "刪除",
width: 200,
auto: false
}, options || {});
var modalId = generateId();
var content = html.replace(reg, function (node, key) {
return {
Id: modalId,
Title: options.title,
Message: options.message,
BtnOk: options.btnok,
BtnCancel: options.btncl
}[key];
});
$('body').append(content);
$('#' + modalId).modal({
width: options.width,
backdrop: 'static'
});
$('#' + modalId).on('hide.bs.modal', function (e) {
$('body').find('#' + modalId).remove();
});
return modalId;
}
return {
alert: function (options) {
if (typeof options == 'string') {
options = {
message: options
};
}
var id = init(options);
var modal = $('#' + id);
modal.find('.ok').removeClass('btn-success').addClass('btn-primary');
modal.find('.cancel').hide();
return {
id: id,
on: function (callback) {
if (callback && callback instanceof Function) {
modal.find('.ok').click(function () { callback(true); });
}
},
hide: function (callback) {
if (callback && callback instanceof Function) {
modal.on('hide.bs.modal', function (e) {
callback(e);
});
}
}
};
},
confirm: function (options) {
var id = init(options);
var modal = $('#' + id);
modal.find('.ok').removeClass('btn-primary').addClass('btn-success');
modal.find('.cancel').show();
return {
id: id,
on: function (callback) {
if (callback && callback instanceof Function) {
modal.find('.ok').click(function () { callback(true); });
modal.find('.cancel').click(function () { callback(false); });
}
},
hide: function (callback) {
if (callback && callback instanceof Function) {
modal.on('hide.bs.modal', function (e) {
callback(e);
});
}
}
};
},
dialog: function (options) {
options = $.extend({}, {
title: 'title',
url: '',
width: 800,
height: 550,
onReady: function () { },
onShown: function (e) { }
}, options || {});
var modalId = generateId();
var content = dialogdHtml.replace(reg, function (node, key) {
return {
Id: modalId,
Title: options.title
}[key];
});
$('body').append(content);
var target = $('#' + modalId);
target.find('.modal-body').load(options.url);
if (options.onReady())
options.onReady.call(target);
target.modal();
target.on('shown.bs.modal', function (e) {
if (options.onReady(e))
options.onReady.call(target, e);
});
target.on('hide.bs.modal', function (e) {
$('body').find(target).remove();
});
}
}
}();
})(jQuery);
main.css
@charset "UTF-8";
.modal-header {
background: #727a84;
color: white;
font-size: 14px; }
.close:hover, .close:focus {
color: #f85757;
text-decoration: none;
cursor: pointer;
opacity: 1;
filter: alpha(opacity=50); }
.close {
color: #f85757;
text-decoration: none;
cursor: pointer;
opacity: 1;
filter: alpha(opacity=50);
text-shadow: 0 0 0 #f85757; }