prehistoric-systems/mytinytodo
1
0
Fork 0
mirror of https://github.com/maxpozdeev/mytinytodo.git synced 2026-03-11 08:55:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

disable background scrolling on modal dialog with js

Browse source
This commit is contained in:
maxpozdeev 2022-11-14 16:53:39 +03:00
parent 068335c2ad
commit 4452e8eb1b
2 changed files with 22 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/content/mytinytodo.js
View file

@ -2816,12 +2816,19 @@ function mttAlert(msg, callbackOk)
function mttModalDialog(dialogType = 'alert')
{
if ( ! (this instanceof mttModalDialog) ) return new mttModalDialog(dialogType);
var dialog = this;
let dialog = this;
this.type = dialogType;
let lastScrollTop = 0;
this.close = function() {
//restore scrolling
$('body').css({
'position': '',
'top': ''
});
window.scrollTo(window.pageXOffset, lastScrollTop);
$("html").removeClass('mtt-modal-dialog-active');
$("#modal_overlay, #modal").hide();
$('html').css('overflow-y', '');
$("#btnModalOk").off('click');
$("#btnModalCancel").off('click');
$("#modalMessage").text('');
@ -2831,7 +2838,7 @@ function mttModalDialog(dialogType = 'alert')
this.ok = function(callback) {
$("#btnModalOk").on('click', function() {
var value = $("#modalTextInput").val();
const value = $("#modalTextInput").val();
dialog.close();
if (typeof callback === 'function')
callback( dialog.type === 'prompt' ? value : null );
@ -2859,8 +2866,7 @@ function mttModalDialog(dialogType = 'alert')
}
this.show = function() {
$('html').css('overflow-y', 'hidden'); // disable scrolling
var modalOverlay = document.getElementById("modal_overlay");
let modalOverlay = document.getElementById("modal_overlay");
if (!modalOverlay) {
modalOverlay = document.createElement("div");
modalOverlay.id = "modal_overlay";
@ -2891,6 +2897,15 @@ function mttModalDialog(dialogType = 'alert')
dialog.close();
}
});
//disable background scrolling
lastScrollTop = window.pageYOffset;
$('body').css({
'position': 'fixed',
'top': `-${lastScrollTop}px`
})
$("html").addClass('mtt-modal-dialog-active');
$("#modal_overlay, #modal").show();
return dialog;
};

3
src/content/theme/style.css
View file

@ -103,12 +103,13 @@
html {
height:100%;
/*overflow-y:hidden; /* for modal overlay to not hide body scrollbar */
/*overflow-y:hidden; /* for modal overlay to disable scrolling, but breaks position:absolute */
font-size:14px; /* =1rem */
}
body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
background-color: var(--color-bg);
color: var(--color-text-default);