How to open a popup using JavaScript
A popup in an application can be useful for multiple purposes. For example I'm using to connect the social accounts avoiding page redirects. With a popup is more easy to do this.
This video shows an approach to open a popup using JavaScript.
Gist url https://gist.github.com/InterTuts/311e95b97e13262d8015caab6ce7b766
This video shows an approach to open a popup using JavaScript.
Gist url https://gist.github.com/InterTuts/311e95b97e13262d8015caab6ce7b766
Category
🦄
CreativityTranscript
00:00To use the social API for login, we need to handle a redirect which will return an authorization code
00:12The authorization code can then be exchanged for an access token
00:20In my application, I'm connecting social accounts in a dialogue
00:28and this redirect or access token will request the same dialogue to be opened again
00:40To prevent this, when a user clicks this button, a pop-up will open requesting an authorization code
00:54The authorization code will then be exchanged for an access token
01:02The pop-up will close automatically and the social accounts can be selected here for posting
01:15Now, let's see the code
01:19When the user clicks on this button, it is called automatically this function with Facebook as parameter
01:36This is important because this application will support many social networks
01:45and I need a dynamic way to connect the accounts
01:52This is the function which opens the pop-up
01:59This is the pop-up URL
02:04This is important to calculate the distance from the left and put the pop-up at the center of the screen
02:18This is used to get the width for the pop-up in a dynamic way based on the device screen
02:31Same for height
02:37Next, I'm using this window open to open a new browser window with these options
02:53and this will be used as window title
03:00This assures that the new opened window will be showed immediately to the user
03:13This is the only piece of the code to open a pop-up
03:20In the following videos, I will show how even to receive data from the pop-up
03:29If you want this code, you can copy it from the description
03:42Thank you for watching