background top icon
background center wave icon
background filled rhombus icon
background two lines icon
background stroke rhombus icon
header logo icon

Download "Модальное окно (Popup) на REACT JS. Переиспользуемое всплывающее окно на REACT JS"

input logo icon
"videoThumbnail Модальное окно (Popup) на REACT JS. Переиспользуемое всплывающее окно на REACT JS
Similar videos from our catalog
|

Similar videos from our catalog

Video tags
|

Video tags

React
Redux
Frontend
web
javascript
webpack
web приложение
ulbitv
webpack react
axios
javascript axios
async await
react redux
dispatch
useselector
usedispatch
react hooks
express
mern
MERN
mongo
mongodb
nodejs
cloud
облачное хранилище
облачный диск
разработка
burger menu
menu
dropdown meny
burger react
drag and drop
dnd
dnd react
drag and drop react
popup
modal window
modal
Subtitles
|

Subtitles

subtitles menu arrow
  • ruRussian
Download
00:00:03
Hello everyone,
00:00:04
and so in this video we will make a modal
00:00:07
or otherwise pop-up window, I
00:00:09
added some text to the page, a
00:00:11
button that will open a
00:00:13
modal window and some updating
00:00:16
styles and also an empty component with empty
00:00:19
css for the modal window, so let's start by
00:00:22
setting a class for the root block In the name,
00:00:24
we’ll write a model and inside we’ll create
00:00:27
another block, this will be just
00:00:29
the content part of the modal window and let’s
00:00:32
call it the component itself, it will
00:00:34
take several samples saw, the most
00:00:36
important thing is the asset that is responsible for whether the
00:00:38
component is visible or not and the function
00:00:40
that changes this state, we’ll come back
00:00:43
web component and add a modal
00:00:45
window here, we will also immediately create a state,
00:00:48
this is exactly the same state
00:00:50
responsible for the visibility of the window, and for now
00:00:53
we will make the window visible by default, we will
00:00:55
pass a variable function that changes
00:00:57
like props to the modal window and now
00:01:00
we will deal with the styles and open
00:01:03
the file css and start writing in style,
00:01:05
stretch the modal window across the entire
00:01:07
height, across the entire width and set the
00:01:10
background color, use rgb color, make it
00:01:14
black and the transparency at about 0 4
00:01:16
position, make a fix so that when scrolling the
00:01:19
page, the modal window always
00:01:20
remains in the middle and stick it to the
00:01:23
upper left corner and we got
00:01:25
this kind of darkening and now let’s take care of
00:01:28
the content part, write a class name and
00:01:31
set the duel style, make
00:01:33
20 pixels, round the edges
00:01:35
of 12 pixels, make the background color
00:01:39
white, and in the future the width will be
00:01:41
set depending on the content, but
00:01:43
for now, just to see, let’s
00:01:45
make it fixed height and width
00:01:47
now we center it all back to the
00:01:50
module block and make the display flex and
00:01:53
center it both horizontally and vertically this is the
00:01:55
window we got
00:01:58
now the height and width can be removed and
00:02:00
now let’s take care of the logic of opening and
00:02:03
closing the window
00:02:04
we return to the component and hang it
00:02:07
listener for click processing here, all
00:02:09
we will do is change the values ​​of the
00:02:12
asset variable to falls,
00:02:13
that is, when you click on the darkened
00:02:15
area, the window should close, but so that
00:02:18
it does not close, and when you click on the
00:02:19
content part,
00:02:20
we will make a stock about pagination, return
00:02:23
to the styles and add something else
00:02:25
if the class given has an asset class,
00:02:28
then some kind of logic will occur,
00:02:30
class mod, we will add transform scale 0, that
00:02:34
is, we will reduce it to such an extent that it
00:02:36
will not be visible, and if it is active and we
00:02:38
will increase it to full size, now this
00:02:41
class remains to be dynamically added,
00:02:43
we will check
00:02:45
if asset equals true to we will
00:02:47
add the model class and the asset class,
00:02:50
otherwise we will simply add the
00:02:51
module class then we will return to the web component
00:02:54
and there we have a button and we need to
00:02:57
open a modal window when clicking on it, we
00:02:59
will attach a listener for clicking on the button and
00:03:02
we will open this asset true
00:03:04
let's try to close and
00:03:06
open the browser and everything works fine, the window
00:03:09
closes and opens again, let's go back
00:03:12
to the styles and now let's do
00:03:14
animations for the content, we'll still return the height and width,
00:03:17
and for the class of mods we'll make a transition 05
00:03:20
to animate the opening of the window,
00:03:22
open the browser and see the animation
00:03:25
happens, but it's dimming It’s
00:03:27
also animated, which doesn’t look very good, let’s make
00:03:30
some adjustments,
00:03:31
remove the transform and set the opacity to
00:03:34
zero, that is, the element will be transparent and
00:03:36
so that the modal window does not overlap
00:03:38
the elements on the page, we can interact with them
00:03:40
using the intervention, we’ll do it for
00:03:42
us, as you can see, without it we can’t help but
00:03:44
select the text either click on something and
00:03:46
when the modal window is active we return the
00:03:49
opacity to one, we make the window visible again, the
00:03:52
transformation is also removed, we
00:03:54
open the browser and it already looks
00:03:57
prettier, but since we
00:03:59
disabled the
00:04:00
window using the intervention, it becomes unclickable, so
00:04:02
we return it and now it works
00:04:04
correctly, I also suggest we animate and
00:04:07
do the content part by analogy, if
00:04:10
claas markant
00:04:11
contains an asset, then we will
00:04:13
also change something in it, initially we will reduce
00:04:16
it by half in size and also add
00:04:19
a transition so that this is a matter of the entire Nemirowa
00:04:21
Lodz and when the window becomes active
00:04:23
we return the [ __ ] to the full-size mode
00:04:25
now remains on the content part, by
00:04:28
analogy, hang the asset class,
00:04:30
copy it, set it and change the name to the
00:04:33
content mode, open the browser and look at the
00:04:36
background, now it smoothly gains color, the
00:04:38
window changes in size, which looks
00:04:41
nice, and now the most important thing
00:04:43
is to make this perry component
00:04:45
used so that we can make one such
00:04:47
component on the entire application and then it was
00:04:50
used in different places, for this
00:04:52
we add a sample speedring and insert it
00:04:54
into the content part. Now let’s go back to
00:04:57
the styles and finally remove the height, it will be
00:04:59
set dynamically and make the width
00:05:02
half the width of the screen. Now
00:05:05
we return to the web component
00:05:06
and add that same children Or you can
00:05:09
make a pair and write the code already
00:05:12
inside the components for example, just
00:05:15
add some text here,
00:05:17
open the browser and as you can see the modal
00:05:19
window already with some text, so as not to
00:05:22
waste time, I also added
00:05:24
some form to the window with several inputs of and
00:05:26
the button doesn’t look very good, of course, but for
00:05:29
understanding the component turned out to be
00:05:31
completely Perry used flexible it
00:05:33
can be transferred from projects to the project and
00:05:35
change the style and to your design if it was
00:05:38
interesting leaving a like write a comment
00:05:41
suggesting some ideas that you would
00:05:43
like to see on my channel this everything
00:05:45
really helps the development of the channel,
00:05:47
I look forward to seeing you in the next videos

Description:

В этом уроке мы cделаем адаптивное, переиспользуемое модальное\всплывающее окно на REACT JS. Мой курс "Продвинутый Frontend. В production на React" - https://ulbitv.ru/frontend Поддержать меня и мой канал вы можете по ссылкам ниже. Qiwi кошелек - https://qiwi.com/n/BODYE821 Яндекс деньги - https://yoomoney.ru/to/4100116193037469

Preparing download options

popular icon
Popular
hd icon
HD video
audio icon
Only sound
total icon
All
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players

Questions about downloading video

mobile menu iconHow can I download "Модальное окно (Popup) на REACT JS. Переиспользуемое всплывающее окно на REACT JS" video?mobile menu icon

  • http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.

  • The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.

  • UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.

  • UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.

mobile menu iconWhich format of "Модальное окно (Popup) на REACT JS. Переиспользуемое всплывающее окно на REACT JS" video should I choose?mobile menu icon

  • The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.

mobile menu iconWhy does my computer freeze when loading a "Модальное окно (Popup) на REACT JS. Переиспользуемое всплывающее окно на REACT JS" video?mobile menu icon

  • The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.

mobile menu iconHow can I download "Модальное окно (Popup) на REACT JS. Переиспользуемое всплывающее окно на REACT JS" video to my phone?mobile menu icon

  • You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.

mobile menu iconHow can I download an audio track (music) to MP3 "Модальное окно (Popup) на REACT JS. Переиспользуемое всплывающее окно на REACT JS"?mobile menu icon

  • The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.

mobile menu iconHow can I save a frame from a video "Модальное окно (Popup) на REACT JS. Переиспользуемое всплывающее окно на REACT JS"?mobile menu icon

  • This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.

mobile menu iconWhat's the price of all this stuff?mobile menu icon

  • It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.