我正在尝试通过单击增加和减少图标来使模态窗口可调整大小。每次增加/减少
点击后,模态窗口还应该位于屏幕中央。
目前只有增加功能可用。请问我做错了什么?
this.increaseModal = function () {
var maxHeight = ($(window).height() * 90) / 100;
var maxWidth = ($(window).width() * 90) / 100;
var height = ($(window).height() * 10) / 100;
var width = ($(window).width() * 10) / 100;
if ($('.modal-content').height() <= maxHeight - 100) {
$('.modal-content').height($('.modal-content').height() + height);
increaseHeightCount = increaseHeightCount + 1;
}
if ($('.modal-content').width() <= maxWidth - 100) {
$('.modal-content').width($('.modal-content').width() + width);
increaseWidthCount = increaseWidthCount + 1;
}
$('.modal-dialog').draggable();
$('#myModal').addClass('outPopUp');
}
this.decreaseModal = function () {
var maxHeight = ($(window).height() * 90) / 100;
var maxWidth = ($(window).width() * 90) / 100;
var height = ($(window).height() * 10) / 100;
var width = ($(window).width() * 10) / 100;
if (increaseWidthCount > 0) {
$('.modal-content').width($('.modal-content').width() - width);
increaseWidthCount = increaseWidthCount - 1;
}
if (increaseHeightCount > 0) {
$('.popup').height($('.popup').height() - height);
increaseHeightCount = increaseHeightCount - 1;
}
}
outPopUp
是我重写 bootstrap css 以更改模态窗口位置的类。
据我观察,在 DOM 浏览器中,.popup 没有分配给元素,因此增加/减少高度无法正常工作。