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;
}
Related
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();
});
}
When I open a pop up from my page, it works fine. But when I try to open the it and scroll to other position on page, then the pop up open accordingly the position of scrolling. I want it to stay on the same position of the page regardless scrolling.
Here is my code that opens the container of my pop up:
//open page
$('.single-page').on('click', function() {
var selectedProject = $(this),
toggle = !selectedProject.hasClass('is-full-width');
if (toggle) toggleProject($(this), $('.page-container'), toggle);
});
$('#popup').show().scrollTop(0);
$('#popup').animate({ scrollTop: (0) }, 'slow');
refere link : https://www.w3schools.com/jquery/css_scrolltop.asp
I think it is scroll issue when toggle(open/close) second time it opens with previous scrolled position
FIX : scroll to top postion on toggle each time is one option
When I use editor.WindowManager.open to open a dialog window in tinyMce, it is centered on the screen.
I would like it to be centered inside the Editor.
How to approach this? Can I control the window location?
I found a solution by adding centering CSS dynamically to the web-page Head when the form opens.
In the "editor.windowManager.open" function of the dialog, I added this code:
id: 'xxx-dialog',
onopen: function() {
// Forcibly center dialog
if ($("head #added-xxx-dialog-CSS").length == 0) // only once
{
$("#xxx-dialog .mce-dragh").remove(); // disable dragging of dialog
var mceHeight=$(".mce-tinymce").height();
var mceTop=$(".mce-tinymce").position().top;
var thisHeight=$("#xxx-dialog").height();
var newTop=mceHeight/2+mceTop-thisHeight/2;
$("head").append('<style id="added-xxx-dialog-CSS"
type="text/css">#xxx-dialog {top:'+newTop+'px !important;}</style>');
}
}, // etc...
This code only centers the Dialog vertically, as in my application the Dialog is centered horizontally automatically anyway, but it is very easy to add a few more lines in the same way to center it horizontally as well.
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/
Beside the general Help page I am planning to add a help button across the website pointing to specific sections of the help page. i.e, the button "Help" in customer page should open a window and display the "help - customer" section of the help page.
This is how I open the window on help click:
function openHelpCustomers() {
var width = "300px";
var height = "450px";
var left = "900px";
var top = "150px";
radopen("help.aspx", "RadWindow1", width, height, left, top);
}
The question is how can I open the page "help.aspx" in the window at the needed section/line?
Using fragment identifiers maybe?
http://en.wikipedia.org/wiki/Fragment_identifier