I'm trying to create a popup() where user clicks on button, then it triggers window where he does some edit.
While the user is editing in the child window, parent window should not be accessed, it should be blocked.
How exactly should i do this?
This is what i'm doing now.
function Popupwindow()
{
name = "Select Requestor";
url = "selectLocation.html";
options = "height=330, width=210, location=no, scrollbars=yes,menubars=yes,toolbars=yes,resizable=yes,left=0";
window.open(url,name,options);
}
So now i'm able to close parent window and even edit parent elements without closing child window.
What you want is called a modal dialog. There's no standard way to do this across multiple browsers, some don't even have anything like it. Your best bet is creating a modal dialog inside the page. Most JS frameworks/toolkits will provide dialogs.
don't use "real" popups, use javascript to "emulate" them in teh same window. take a look at jquerys dialog, where you can also set the modal-mode (example and example) - i think this is what you want.
there are a lot of standalone-js examples out thre if you're not using jquery and a lot of js-frameworks include things like this - just search for "modal dialog".
Related
I am using Google Analytics on a Sharepoint site. On the main page, we have an image in an image carousel that once clicked will bring you to a different page on the site. I have tried everything to track clicks on this image in GTM - click url, click ID, css selector, etc. I can not figure out why my trigger never fires. I have attached the
image, what pops up when I click inspect, and variables that show up with the click in GTM preview... (This is the second half of the variables in preview).Three images total.
Good job on including all the relevant debugging info.
Judging from your inspect, you're looking at the image.
However, judging from your click event inspection, the click lands on an a.
I don't see the a in your DOM on the screenshot, but it may be either dynamically added, or just outside of the screenshot.
No matter. Let's start to carefully debug it. Make a trigger that would be triggered on anything that matches a. That's just a debugging trigger. Make sure it triggers on your image clicks.
Now, let's just make a simple CJS variable that would console.log({{Click Element}}). No need to use it anywhere, just make it. Go to the debug view again, try clicking the banner again and look in the console for something that would look like this:
See that pretty element? Now the wonderful dev console allows you to copy JS path to this element and do whatever you want with it. Mainly, comfortably and quickly test CSS selectors against this element. I suggest changing the selector JS console generated. It should work (unless the page is too dynamic), but it would be fragile. Having the element, however, you'll be able to make your own selectors.
Edit: Stackoverflow modify automatically the Amazon links when you click, so for see the popup, select, copy and paste the URLs in the browser.
On Amazon there is a link to open directly a side popup, like this:
https://www.amazon.com/dp/B07FKTZC4M/#aod (#aod open the popup)
where We can enter some filters. I tried different ways with no success to generate a link that open directly the site popup with new filter pre-applied.
So i need a link that open this page with "new filter" pre-applied:
I tried different solutions, but don't work, for example:
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new#aod
https://www.amazon.com/dp/B07FKTZC4M/ref=new#aod
https://www.amazon.com/dp/B07FKTZC4M/#aod_f_new=true
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new=true#aod
https://www.amazon.com/dp/B07FKTZC4M/ref=aod_f_new?ie=UTF8&f_new=true#aod
I see some informations on source page, maybe that help:
Question: Is there a way to create a link that open directly the side popup with new filter pre-applied? Maybe adding some parameters to the URL.
You can call a function in JavaScript with which you can change the z-index of the popup.
Something like this:
<button onclick="popup()" value="open popup">
Also make the popup. I am just making a rough one:
<div id="popup" style="z-index:1000; position: absolute;">Some code</div>
Remember to set the z-index at behind and the position. Then for JS i will make it simple in case you can't code JS
function popup(){
document.getElementById("popup").style.zIndex=-1;//basically changing the popup's z-index
}
This will just change the z-index of the popup which you must create yourself
I have a couple of form definitions in my main HTML file.
I would like to display these forms in a modal window, when the user performs certain action, such as click on an icon.
I have followed an article on how to do it for links (hrefs). But now my requirement is to get the same working for clicking on an icon.
Thank you,
Harriet
The answer is to write a java function, that will explicitly set the location of the window to where you want the url to point - example:
function openPreferences() {
window.location = '#openPreferences';
}
I think the most simple solution would be to create a LinkBlock Element and set the Background to the Icon's Image, which will allow you to turn it into a Link, thus further allowing you to open your Modal Window with it.. Simply create your Modal as Display None, and upon clicking the LinkBlock (with your Icon as the Background), make it change the Modal property to Display Block, etc.
I have rollover that when clicked opens a link (video) in a new page or tab depending on if I specify target="_blank".
Question? Can I control the width of this new (parent) page. I would like it to be ~80% smaller than the parent just to show the user that it is a separate page. Or.. How can I have this code open in a window of the existing page?
Thank you for your time
<div id="apDiv3"><img src="Rollover blankBL.png" alt="Fork at 5.7 Km stay right" width="400" height="225" id="fork 57" /></div>
As you mentioned in your own post you can use window.open read the window.open documentation for more info. You can specify many parameters about the popup. A simple popup with explicit width / height would look like this:
window.open('http://www.google.com',"My Window Name", "width=400,height=400")
I also created a plunker so you can see it in action
HOWEVER, I really advise against using this. This is the OLD way of doing things. This type of popup hasn't been popular for well over 10 years now. Outside of being annoying and unpopular it is also not dependable. Some browsers / popup blockers will totally block this window from opening.
A better alternative is to use some sort of JS modal library to load the content within the actual page (not in a new window).
One I really like is Magnific Popup they have a bunch of examples on their page.
I know how to show a pop-up window. But I will like to freeze or disable the parent window when there is a pop-up window active. Once the pop-up window is closed, the parent window should automatically be active again.
How exactly is it done?
You do not neet o remake the wheel.
Take a look at this page.
It's a JQuery plugin that does exactly what you ask, and much much more.
It is just my personal idea, but I would think, the solution could be when open the pop up windows, you just override the click function of the parent document to return false, and set it back to normal when they close the pop up window, some JavaScript code will need to be used here
I'm guessing you want a modal dialog box? Most of these disable the parent window by positioning an overlay... Here is a list of 22 different plugins ( you don't need to read German to use this site :P )