We Keep Coding

Prevent BODY from scrolling when a modal is opened in angular application

I want my body to stop scrolling to top when I am trying to open popup modals. I am using both angular material and ng-bootstrap popup modals.
I've tried the piece of CSS code below, but the issue is still there, please help.
body.modal-open {
overflow: hidden;
position: fixed;
}

From what I read here here the position of the modal is set to default at the top. To completely remove the scrolling, use that to position the modal down. If you just want to be at the same position after the modal close, you can use this which I used from the comments: here
openModal() {
// Remember the current scroll position
let pos = (document.documentElement.scrollTop || document.body.scrollTop);
this.bsModalRef = this.modalService.show(ModalComponent);
this.modalHideSubscription = this.modalService.onHide.subscribe(() => {
//Return back to the position before opening modal
window.scrollTo(0,pos);
this.modalHideSubscription.unsubscribe();
});
}

Dialog opens outside viewport

In case you're on a large page and you've scrolled all the way down. At the bottom is a button which opens a dialog. In my case this dialog opens outside the viewport at the top of the page
DEMO
JS:
var showDialogButton = document.getElementById('showDialogButton');
showDialogButton.addEventListener('click', function() {
var bronteDialog = document.getElementById('bronteDialog');
var anchorPoint = document.getElementById('anchor');
bronteDialog.show(anchorPoint);
});
It turns out that the show function accepts an argument which is an anchor for the dialog. But whatever I do, the dialog is at the top. Any help would be appreciated!

You can add this to the CSS:
dialog {
position: fixed;
}

To Disable the background window when pop up opens

I have a link on my page. When i click on it a pop up opens and the background becomes grey in color. But my problem is i am still able to click on other links present in background.
The div id for background is pagewrapper.
As far as i think code -
document.getElementById('pagewrapper').disabled=true; should have done the trick and diabled the entire background behind the pop up freezes. But it is not happening.
This is the code to open the popUp.
Last line was supposed to disable the background window.
function popUpText(popUpContents)
{
// move the popup to a relative position to how the page is scrolled
var containerTop = Position.page($('pagewrapper'))[1];
$('popup').setStyle({top: ((0-containerTop)+100) + 'px'});
var popupPageHTML = $(popUpContents).innerHTML;
var uniquePopupPageHTML = popupPageHTML.replace(/-POPUP_ID_REPLACER-/g,"-");
$('popup').innerHTML = uniquePopupPageHTML;
toggleIt('popup');
$('pagewrapper').setOpacity(.3);
document.getElementById('pagewrapper').disabled=true;
}

You should create a popup layout which must cover entire body and z-index of the overlay should be between body and popup. Delete the overlay when user closes the popup.
Edit: Here is a tutorial that you may follow:
http://hallofhavoc.com/2013/05/how-to-create-an-overlay-popup-box-using-html-css-and-jquery/

Change the popover location dynamically while resizing browser window

I am using Twitter Bootstrap popover and I don't know how would be able to change the popover location dinamic while resizing browser window. The problem is that when i resize the window, popover stays fixed on position. I want to delay the popover like other html elements.
Code:
$('#popover1').popover({
html : true,
content: function() {
return $("#form").html();
},
placement: "top"
});

This works for me. It calls the show event for all visible popovers:
$(window).off("resize").on("resize", function() {
$(".popover").each(function() {
var popover = $(this);
if (popover.is(":visible")) {
var ctrl = $(popover.context);
ctrl.popover('show');
}
});
});

Have a look at the following questions and answers:
Bootstrap Popover showing at wrong place upon zoom in/out or resizing Browser window
jQuery position element based on window resize
You need to use an event handler for the resize event:
$(window).resize(function() {
// your positioning code here
});
Within this code you must reposition your element.

Best way of doing popups / dialogs with JQuery?

I previously did some popups / dialogs that I've now got regression error in () and want to recode to use JQuery for the DIVs / popups / dialogs. Moving to Jquery will be an advantage since we can enable repositioning and resize for dialogs / popups which we can't if the popup is just a DIV which places itself over the other elements.
Now I wonder what is the "best" way to make popups / dialogs / DIV appear with JQuery? I'd rather not add a plugin and only include the basic JQuery file. can you tell me how to do it?
The current page makes something like a popup but it is not repositionable.

The way I would do this is create a .popup class that contains the basic layout features for the popup. Then add this class to a hidden <div> at the top of the page.
Then when a popup is needed, attatch the draggable and resizable attributes of jQuery to it. After that, load the popup's content with a .get() request from a page dedicated for popup content and then .show() it.
Example
CSS
.popup
{
display:none;
position:absolute;
// some other nice styling features
}
HTML
<body>
<div class='popup'></div>
...
page content
...
</body>
Javascript
function popup(){
// for the draggable you may want to specify the drag handle like only the title of the popup
var popup = $('.popup');
popup.draggable();
popup.resizable();
$.get('/getPopup.php?action=theKindOfPopupRequested', function(data) {
popup.html(data);
popup.show('fast');
});
}
Sources:
http://jqueryui.com/demos/resizable/
http://jqueryui.com/demos/draggable/

Here's a rudimentary dialog plugin:
http://jsfiddle.net/pjUUQ/
(function($) {
var dialogHTML = '<div class="dialog"></div>';
$.openDialog = function(opts) {
// Create the DIV for dialog without inserting into DO
var dialog = $(dialogHTML);
dialog.appendTo('body');
// Give dialog some basic CSS
dialog.css({
position: 'absolute', // positioned
'z-index': Math.pow(2,32) // make it sit on top
});
// Position the dialog on the screen
var horizOffset = ($(window).width() - opts.width || dialog.outerWidht()) / 2;
var vertOffset = ($(window).height() - opts.height || dialog.outerHeight()) / 2;
dialog.css({
left: horizOffset,
right: horizOffset,
top: vertOffset,
bottom: vertOffset
});
// Return dialog object to make it chainable
return dialog;
};
}(jQuery));
$.openDialog({width: 200, height: 100}).append('hello world');
​
You can certainly add a lot to it, like handling key events to close on Esc, adding a titlebar with the buttons. But you probably already know how to do these things anyway.
Few things to note when creating dialogs:
Set a high-enough z-index so that dialog is always on top
Append the dialog element to BODY
In my experience, performance is somewhat better if the dialog HTML isn't always present on the page. This goes against graceful degradation, but the lighter the DOM tree, the faster the app seems to go. So it's best to add the dialog element to the tree as needed.
EDIT: Note that my dialog plugin does not expect you to have a predefined HTML on the page. It just conjures up a div. So, you don't select an element and convert it to a dialog. Instead, you create one anew.