Create modal pop up in chrome extension appear outside of default popup - javascript

I am currently using HTML, JS and CSS to create a chrome extension.
Once a button has been pressed, I would like a modal pop up to appear in the bottom right hand corner of the screen.
So far, the pop up only appears inside the default pop up for the extension rather than on the actual page.
I have added the html for the modal inside a div in the "default_popup" referred to in manifest.json. Everything works apart from where it appears.
Thanks for your time.

Related

How to make a button open a small window within the html page

So you know how extensions work in Google, right? You click a button and it opens this small window within the internal webpage. I know how to make a button open an external window, but how do I make it work similarly to an extension. Basically, I'd like to have an html page where I can click a button and it'll open a small popup of another .html file within the first html page. So it would be this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup but where it says "A Simple Popup!" it's an .html page.

default chrome print function

This is the window that appears for printing in browser. This windows appear after opening on a PDF page in a browser. Also this window is next stop after clicking print button in a PDF file generated by FPDF. I am using FPDF and I believe you cant output or add other things aside from your data so Close window automatically after printing dialog closes solution is not valid for my problem. This solution basically add a JS script in the pop up window.
Is there a way to close this window after clicking on the PRINT BUTTON for PDF pages. For PDF generated by FPDF?

How can I keep my popup focused?

I have created a couple of pages whose content will be displayed in a pop up window.
I have a page where I define 3 links:
Page1<br />
Page2<br />
Page3
When clicking on the link, I have a popup displayed. But when clicking on another link, the popup is minimized. I need to keep it opened and display appropriate content from another page.
Unfortunately, I cannot use any javascript functions to focus my popup, since I need to put the links onto another vendor's website, that allows only simple html to be copied over, so when someone else will click the link, popup will open appropriate content.
Is there any way to achieve that with what I currently have?

Displaying a popup without being minimized

I have several links in a page that opens a popup window to display the contents of these links.
On Chrome when I click on a link (see code below) the popup window appears front and when I click on a second link, the content changes and the popup its still front: This is the behavior I want to have.
But with Firefox and IE, when I click on the first link the popup appears and when I click on the second link, the content changes but the popup window is minimized.
How to have the same behavior as Chrome on Firefox and IE?
Here's the code:
function openpopup(popurl,winName){
winpops=window.open(popurl,winName,'toolbar=no,location=no,status=no,menubar=yes,scrollbars=yes,resizable=yes,width=1020px,height=300px,left=125px,top=300px,scrollbars=yes').focus();
}
centent1
centent2
I edit the message to not create a second topic.
With IE the text displayed in the popup window does not contain newlines, it is unreadable. Is there something to add more for proper formatting?

Simply add .focus()
function openpopup(popurl,winName){
winpops=window.open(popurl,winName,'toolbar=no,location=no,status=no,menubar=yes,scrollbars=yes,resizable=yes,width=1020px,height=300px,left=125px,top=300px,scrollbars=yes',true)
winpops.focus();
}

How to implement javascript blocking modal dialog in with DHTML

I have a website with a flash image viewer. Once user clicks on flash button, I need to give a confirmation modal dialog before saving the file and if user clicks on OK only I have to pop file download dialog.
Confirmation dialog with in flash is not an option for me. So I have to invoke JS function to pop a confirmation.
Within the site, a custom DHTML confirmation modal dialog is used and it has two JS callback functions one for "OK" and the other for "Cancel" button click event handers. I have to use this modal dialog for this need.
With Flash player 10 security features, it is unable to pop flash file download dialog via JavaScript.
Simple JS confirm dialog works for me as I can return the user's action by calling JS function from flash as JS confirm dialog is a blocking dialog.
How can I implement same blocking type custom confirm dialog ?

You need to wrap your popup into a div.
Make this div the top element in your page, eg: using z-index.
And give a fixed position with a height and width of 100%.
You can leave it transparent or give some effect using semi-transparent colors.
If you have select elements in your page, they will go through this div.
To avoid this problem, you can put behind the div a transparent iframe with the same size.

Categories

Resources