How to create a non-modal React dialog? - javascript

I'm working on a javascript React-based application running under nwjs.
My task is: on a button click, display scrollable instructions in a dialog that users can drag to a second monitor, so they can do their work in the main window, following the instructions in my new dialog.
I only know how to make modal dialogs with React. How do I make a non-modal dialog, so the user can scroll through the instructions as needed while they work in the main window?

Window you create trought react, must stay in browser window.
Call new child window so you get new window that can be dragged across
desktop.
Window.open(url, [options], [callback])
See documentation

Related

Hiding windows created by main window in electron

I'm web scraping in electron using puppeteer and whenever I encounter a download button with an onclick event triggering a 'downloadCourseDocs(....)' function, I emulate a click on it. This, in a normal browser opens a new tab for downloading that file.
In electron, I see that it opens a new blank, white window.
How do I prevent this/ hide the newly created window?
I tried playing around with the "browser-window-created" and "new-window-for-tab" events on the app and window instance but to no luck.
Thank you for your time.
In case someone is looking for an answer to this, here's how I fixed it:
window.webContents.on("did-create-window", (windowCreated) => windowCreated.hide());
You could probably also close the window.

show popup with custom text before closing the page (modern browsers)

I have laravel project with react components.
There is a form on one page and I want to have a modal window displayed with "Save changes Yes/No" message, while user is closing the page.
As soon as I know this can be done in two ways:
By using Prompt from react-router package, but it seems that this won't work for me since I connect react component inside the laravel blade template, thus I don't use react-router.
By using the "beforeunload" event. Modern browsers don't support adjustable messages for the confirmation window and I need to display the adjustable message ("Save changes?").
Does anybody know another way how to track the page closing (or switching to another page) and display a popup window with custom text? Is that possible to display a custom modal window instead of the default confirmation one?

Directive in pop up window angularjs

I've a simple single page application. I want to implement tear off windows like functionality, like if I've a directive with a button in the tool bar that when clicked hides the directive in the main app, opens a pop up window (not a modal) and opens that directive in the popup window. Similarly when the button is clicked in the popup window it closes the popup window and the directive reappears in the main app.
Is it even possible? If so can you please provide me with some pointers?. so far I've looked into
https://github.com/bulkan/angular-popup
Couldn't even get the thing running :(
Any help would be highly appreciated ..
Cheers

Appending dom object with attached events to new popup window causes events not to trigger

In my web application I show the user an overview of information in a system in different containers. Some of these containers can be nice to "pop out" into a separate window to allow the user to drag the window to a separate screen to get a better overview of the information(maps, schduler etc).
My problem occurs when trying to use the newly appended container in the newly created window. The html is there but the events are not working.
I have simplified my problem here: http://frankyboy.se/test/slider/test.html
What the page does is it imports jquery and jquery ui.
It initializes the jquery ui slider widget.
It then creates a new window when pressing a button, waits a second, then appends the slider to the new window.
The slider works in the original window but stops working in the new window.
Can anyone explain why and maybe how to fix this ?
UPDATE:
Ok it seems like at least the slider widget has problems running in a separate window. Maybe it is up to the plugin to support being able to be moved or initialized in a child window. My latest example shows two buttons, one opening up a new window and creating a slider and the other opening up a new window and creating a button. You can clearly see that the slider is dependent on the parent window since the slider will only move when you move the mouse in the parent window. http://frankyboy.se/test/slider/parent.html
To test the slider, click the first button, the slider appears in the child window. Click the slider, nothing will happen, move the mouse to the same position in the parent window and pretend there is an invisible slider there in the same position.
In your new window opened, you only append the container to the new document, but you have to call $("#test").slider(); again to let the slider to work.
updated working example

Customizing the window popup skin?

Is there a way to customize the window layouts of popup that opens as a result of window.open event?
You could use jQuery UI to create a modal dialog box if you don't need an actual browser window.
If you mean you want to style the browser window this is not possible (not reliably across browsers as far as I know at least). You could open up your own-made popups inside the already opened website using javascript (then the popups would not be real popups but elements in the html DOM). Check out www.zkoss.org for an example using ajax for this if you are using java as a backend technology.
Demo:
Modal window demo

Categories