版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/wangyinlon/article/details/89134875
调用
Notify.info('Hello 银龙')
var showMessage = function(type, message, duration) {
var $exist = $('.bootstrap-notify-bar');
if ($exist.length > 0) {
$exist.remove();
}
var html = '<div class="alert alert-' + type + ' bootstrap-notify-bar" style="display:none;">'
html += '<button type="button" class="close" data-dismiss="alert">×</button>';
html += message;
html += '</div>';
var $html = $(html);
$html.appendTo('body');
$html.slideDown(100,
function() {
duration = $.type(duration) == 'undefined' ? 3 : duration;
if (duration > 0) {
setTimeout(function() {
$html.remove();
},
duration * 1000);
}
});
};
var Notify = {
primary: function(message, duration) {
showMessage('primary', message, duration);
},
success: function(message, duration) {
showMessage('success', message, duration);
},
warning: function(message, duration) {
showMessage('warning', message, duration);
},
danger: function(message, duration) {
showMessage('danger', message, duration);
},
info: function(message, duration) {
showMessage('info', message, duration);
}
};
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/bootstrap-modal-hack2.js"></script>
<script src="~/Scripts/bootstrap-notify.js"></script>
</head>
<body>
<div>
<button onclick="notify()">notify</button>
<a class="btn btn-success btn-sm" data-url="/Bootstrap/Form" data-toggle="modal" data-target="#modal">添加新用户</a>
</div>
<div id="modal" class="modal" ></div>
<div id="attachment-modal" class="modal" ></div>
<script>
function notify() {
Notify.info('Hello 银龙');
}
</script>
</body>
</html>
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">添加新用户</h4>
</div>
<div class="modal-body">
<form id="user-create-form" class="form-horizontal" method="post" action="/admin/user/create">
<div class="row form-group">
<div class="col-md-2 control-label ">
<label for="emailOrMobile">邮箱/手机</label>
</div>
<div class="col-md-7 controls">
<input type="text" id="emailOrMobile" data-url="/admin/user/create/email_or_mobile/check"
name="emailOrMobile" class="form-control" placeholder='邮箱地址/手机号码'>
</div>
</div>
<div class="row form-group">
<div class="col-md-2 control-label">
<label for="nickname">用户名</label>
</div>
<div class="col-md-7 controls">
<input type="text" id="nickname" name="nickname" data-url="/admin/user/create/nickname/check"
class="form-control" placeholder='不填将自动生成'>
</div>
</div>
<div class="row form-group">
<div class="col-md-2 control-label">
<label for="password">密码</label>
</div>
<div class="col-md-7 controls">
<input type="password" id="password" name="password" class="form-control">
<p class="help-block">5-20位英文、数字、符号，区分大小写</p>
</div>
</div>
<div class="row form-group">
<div class="col-md-2 control-label">
<label for="confirmPassword">确认密码</label>
</div>
<div class="col-md-7 controls">
<input type="password" id="confirmPassword" name="confirmPassword" class="form-control">
<p class="help-block">再输入一次密码</p>
</div>
</div>
<div class="row form-group">
<div class="col-md-2 control-label">
<label for="roles">用户权限</label>
</div>
<div class="col-md-7 controls">
<input type="checkbox" value="ROLE_TEACHER" name="roles[]"> 教师
</div>
</div>
<input type="hidden" name="_csrf_token" value="m7FAZDTwPS6bRYc4fgOMH6yE49jzXHgCkIuLmUuETJ4">
</form>
</div>
<div class="modal-footer">
<button id="user-create-btn" data-submiting-text="正在提交..." type="submit" class="btn btn-primary pull-right"
data-toggle="form-submit" data-target="#user-create-form">
提交
</button>
<button type="button" class="btn btn-link pull-right" data-dismiss="modal">取消</button>
@*<script>app.load('user/create-modal-mobile');</script>*@
</div>
</div>
</div>
@*<script type="text/javascript">
window.seajsBoot && window.seajsBoot();
$("[data-toggle='popover']").popover();
</script>*@
$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
var imgUrl = '/img/loading.gif';
var $this = $(this),
href = $this.attr('href'),
url = $(this).data('url');
if (url) {
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, '')));
var $loadingImg = "<img src='" + imgUrl + "' class='modal-loading' style='z-index:1041;width:60px;height:60px;position:absolute;top:50%;left:50%;margin-left:-30px;margin-top:-30px;'/>";
$target.html($loadingImg);
$target.load(url);
}
});
//同时存在多个modal时，关闭时还有其他modal存在，防止无法上下拖动
$(document).on("hidden.bs.modal", "#attachment-modal", function () {
if ($("#modal").attr('aria-hidden')) $(document.body).addClass("modal-open");
if ($('#material-preview-player').length > 0) $('#material-preview-player').html("");
});
$('.modal').on('click', '[data-toggle=form-submit]', function (e) {
e.preventDefault();
$($(this).data('target')).submit();
});
$(".modal").on('click.modal-pagination', '.pagination a', function (e) {
e.preventDefault();
var $modal = $(e.delegateTarget);
$.get($(this).attr('href'), function (html) {
$modal.html(html);
});
});
;
(function ($, window, undefined) {
// outside the scope of the jQuery plugin to
// keep track of all dropdowns
var $allDropdowns = $();
// if instantlyCloseOthers is true, then it will instantly
// shut other nav items when a new one is hovered over
$.fn.dropdownHover = function (options) {
// don't do anything if touch is supported
// (plugin causes some issues on mobile)
if ('ontouchstart' in document) return this; // don't want to affect chaining
// the element we really care about
// is the dropdown-toggle's parent
$allDropdowns = $allDropdowns.add(this.parent());
return this.each(function () {
var $this = $(this),
$parent = $this.parent(),
defaults = {
delay: 100,
instantyCloseOthers: true
},
data = {
delay: $(this).data('delay'),
instantlyCloseOthers: $(this).data('close-others')
},
showEvent = 'show.bs.dropdown',
hideEvent = 'hide.bs.dropdown',
// shownEvent = 'shown.bs.dropdown',
// hiddenEvent = 'hidden.bs.dropdown',
settings = $.extend(true, {}, defaults, options, data),
timeout;
$parent.hover(function (event) {
// so a neighbor can't open the dropdown
if (!$parent.hasClass('open') && !$this.is(event.target)) {
// stop this event, stop executing any code
// in this callback but continue to propagate
return true;
}
openDropdown(event);
}, function () {
timeout = window.setTimeout(function () {
$parent.removeClass('open');
$this.trigger(hideEvent);
}, settings.delay);
});
// this helps with button groups!
$this.hover(function (event) {
// this helps prevent a double event from firing.
// see https://github.com/CWSpear/bootstrap-hover-dropdown/issues/55
if (!$parent.hasClass('open') && !$parent.is(event.target)) {
// stop this event, stop executing any code
// in this callback but continue to propagate
return true;
}
openDropdown(event);
});
// handle submenus
$parent.find('.dropdown-submenu').each(function () {
var $this = $(this);
var subTimeout;
$this.hover(function () {
window.clearTimeout(subTimeout);
$this.children('.dropdown-menu').show();
// always close submenu siblings instantly
$this.siblings().children('.dropdown-menu').hide();
}, function () {
var $submenu = $this.children('.dropdown-menu');
subTimeout = window.setTimeout(function () {
$submenu.hide();
}, settings.delay);
});
});
function openDropdown(event) {
$allDropdowns.find(':focus').blur();
if (settings.instantlyCloseOthers === true)
$allDropdowns.removeClass('open');
window.clearTimeout(timeout);
$parent.addClass('open');
$this.trigger(showEvent);
}
});
};
$(document).ready(function () {
// apply dropdownHover to all elements with the data-hover="dropdown" attribute
$('[data-hover="dropdown"]').dropdownHover();
});
})(jQuery, this);