Skip to main contentSkip to footer
InterTuts
  • 9/4/2024
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
Transcript
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

Recommended

2:11
How to Block or Allow 'Pop-Ups and Redirects' in Google Chrome on Android?
TechTips
1/20/2020
2:43
How to Block 'Pop-up Windows' in Firefox Browser on Windows 10?
TechTips
1/13/2020
2:02
How to Block 'Pop-Ups and Redirects' in Edge Browser for Android?
TechTips
3/1/2023
2:35
How to Block Pop Ups in Google Chrome on Windows 10?
TechTips
10/10/2019
2:28
Pagination in React & Next JS
InterTuts
12/20/2024
1:47
React & Node.js Social Chat: unsubscribe Facebook Pages from application's webhook
InterTuts
12/18/2024
1:22
How to use notifications alerts in React & Next JS
InterTuts
12/18/2024
3:30
React & Node.js Social Chat: how to connect Facebook Pages to receive direct messages
InterTuts
12/18/2024
1:56
How to convert a string to MongoDB ObjectId in Node.js
InterTuts
12/17/2024
2:05
How to bulk insert or update data in MongoDb with Mongoose
InterTuts
12/16/2024
1:41
How to retrieve URL's query parameters in Next.js(CSR)
InterTuts
12/15/2024
3:27
How to handle dynamic route parameters in Express.js
InterTuts
12/14/2024
1:42
How to retrieve and pass dynamic route segment between components in Next.js & React
InterTuts
12/14/2024
2:00
How to create vertical tabs in Chakra UI
InterTuts
12/14/2024
1:53
How to create a modal in Chakra UI & React
InterTuts
12/13/2024
0:49
React & Node.js Social Chat: Introduction
InterTuts
12/11/2024
3:02
How to use recipes in Chakra UI & Next.JS
InterTuts
12/11/2024
1:33
How to setup global fonts in Chakra UI & Next.JS
InterTuts
12/10/2024
2:30
How to setup global colors in Chakra UI & Next.JS
InterTuts
12/10/2024
1:54
Serializing big strings impacts deserialization performance (consider using Buffer instead and decode when needed)
InterTuts
12/9/2024
1:46
Angular & ASP.NET Core Web API Authentication: how is working registration and sign in using Google API
InterTuts
12/7/2024
4:30
Angular & ASP.NET Core Web API Authentication: how is working registration
InterTuts
12/7/2024
5:10
Angular & ASP.NET Core Web API Authentication: how is working the password reset
InterTuts
12/7/2024
2:44
Angular & ASP.NET Core Web API Authentication: how is working remember me login
InterTuts
12/7/2024
4:37
Angular & ASP.NET Core Web API Authentication: how is working login
InterTuts
12/7/2024
4:48
How to validate an email address in ASP.NET Core Web API using a custom attribute
InterTuts
11/30/2024
3:29
How to reset a reactive form in Angular 19
InterTuts
11/29/2024
3:54
How to validate Angular Material reactive form in Angular 19
InterTuts
11/27/2024
2:12
How to test .http files with REST Client
InterTuts
11/25/2024
0:51
Former Aide Claims She Was Asked to Make a ‘Hit List’ For Trump
Veuer
9/27/2023