68. Bootstrap 4 Modals and PopUp - Full stack web development Tutorial Course
7.1 هزار بار بازدید -
6 سال پیش
-
In this FullStackWebDevelopment tutorial course
In this FullStackWebDevelopment tutorial course series video, we are going to learn and implement how to build #modal #popup for a button using #bootstrap.
Modal is a child window that is layered over its parent window. It displays the content from a separate source that can have some interaction without leaving the parent window.
The Modal component is a dialogue box/popup window that is displayed on top of the current page. It is a dialogue box/popup window that can be used for lightboxes, user notifications, UI enhancements, e-commerce components, and many other things. It's easily customizable. You can manipulate its size, position, and content.
Basic Modal
Create a modal by using the .modal class and attribute data-toggle = "modal" on a element, like a button or link, along with a data-target = "#identifier" or href = "#identifier" to target a specific modal to toggle.
Modal Size
Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for large modals, or .modal-xl for extra-large modals.
Add the size class to the div element with class .modal-dialog:
Note: Medium size is the default value, so there isn't a dedicated class for it.
- .modal-sm: Small Modal
- .modal-lg: Large Modal
- .modal-fluid: Full Width Modal
Centred Modal
Centre the modal vertically and horizontally within the page, with the .modal-dialog-centered class.
Scrolling Modal
When you have a lot of content inside the modal, a scrollbar is added to the page.
Side modal
Note 1: To make it work properly, apart from adding a class for a position, you also need to add the special class .side-modal to the .modal-dialog div.
Note 2: If you want to change the direction of modal animation, add the class .top, .right, bottom, or .left to the .modal div.
- .modal-side + .modal-top-right Top Right
- .modal-side + .modal-top-left Top Left
- .modal-side + .modal-bottom-right Bottom Right
- .modal-side + .modal-bottom-right Bottom Left
Frame modal
Note 1: As in the previous examples, to make it works properly, apart from adding a class for a position, you also need to add the special class .modal-frame to the .modal-dialog div.
Note 2: If you want to change the direction of modal animation, add the class .top, .right, bottom, or .left to the .modal div.
- .modal-frame + .modal-bottom Bottom
- .modal-frame + .modal-top Top
Also, there are many types of models you can look up to.
Since we are building a popup modal for buttons we can browse bootstrap 4, go to documentation, click on components, and then scroll over to modals and choose whatever we want. Then copy the respective code of button to the button class that we have created in the previous video. And can follow the steps in the video to create the popup modal.
----------------------------
Week 2: Day 5
Section 9: Bootstrap 4: Skate or Die Website
Tutorial 68: Bootstrap 4 Modals and PopUp
----------------------------
Do subscribe and hit Bell Icon
----------------------------
Follow us in social media handles for opportunities and code related support.
Instagram: Instagram: wb.web
Facebook: Facebook: wbweb
Twitter: Twitter: wbweb_in
LinkedIn: LinkedIn: wbweb
----------------------------
Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.
For more information, please write back to us at [email protected] or call us at IND: 7077568998
After completing the course, write to [email protected] for internship or freelancing opportunities.
For consultation or partnership, related queries drop a mail to [email protected].
----------------------------
Affiliate Space
Brand: Hostinger International
https://www.hostg.xyz/SH13I (International)
https://www.hostg.xyz/SH2H (For India)
Modal is a child window that is layered over its parent window. It displays the content from a separate source that can have some interaction without leaving the parent window.
The Modal component is a dialogue box/popup window that is displayed on top of the current page. It is a dialogue box/popup window that can be used for lightboxes, user notifications, UI enhancements, e-commerce components, and many other things. It's easily customizable. You can manipulate its size, position, and content.
Basic Modal
Create a modal by using the .modal class and attribute data-toggle = "modal" on a element, like a button or link, along with a data-target = "#identifier" or href = "#identifier" to target a specific modal to toggle.
Modal Size
Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for large modals, or .modal-xl for extra-large modals.
Add the size class to the div element with class .modal-dialog:
Note: Medium size is the default value, so there isn't a dedicated class for it.
- .modal-sm: Small Modal
- .modal-lg: Large Modal
- .modal-fluid: Full Width Modal
Centred Modal
Centre the modal vertically and horizontally within the page, with the .modal-dialog-centered class.
Scrolling Modal
When you have a lot of content inside the modal, a scrollbar is added to the page.
Side modal
Note 1: To make it work properly, apart from adding a class for a position, you also need to add the special class .side-modal to the .modal-dialog div.
Note 2: If you want to change the direction of modal animation, add the class .top, .right, bottom, or .left to the .modal div.
- .modal-side + .modal-top-right Top Right
- .modal-side + .modal-top-left Top Left
- .modal-side + .modal-bottom-right Bottom Right
- .modal-side + .modal-bottom-right Bottom Left
Frame modal
Note 1: As in the previous examples, to make it works properly, apart from adding a class for a position, you also need to add the special class .modal-frame to the .modal-dialog div.
Note 2: If you want to change the direction of modal animation, add the class .top, .right, bottom, or .left to the .modal div.
- .modal-frame + .modal-bottom Bottom
- .modal-frame + .modal-top Top
Also, there are many types of models you can look up to.
Since we are building a popup modal for buttons we can browse bootstrap 4, go to documentation, click on components, and then scroll over to modals and choose whatever we want. Then copy the respective code of button to the button class that we have created in the previous video. And can follow the steps in the video to create the popup modal.
----------------------------
Week 2: Day 5
Section 9: Bootstrap 4: Skate or Die Website
Tutorial 68: Bootstrap 4 Modals and PopUp
----------------------------
Do subscribe and hit Bell Icon
----------------------------
Follow us in social media handles for opportunities and code related support.
Instagram: Instagram: wb.web
Facebook: Facebook: wbweb
Twitter: Twitter: wbweb_in
LinkedIn: LinkedIn: wbweb
----------------------------
Got a question on the topic? Please share it in the comment section below and our experts will answer it for you.
For more information, please write back to us at [email protected] or call us at IND: 7077568998
After completing the course, write to [email protected] for internship or freelancing opportunities.
For consultation or partnership, related queries drop a mail to [email protected].
----------------------------
Affiliate Space
Brand: Hostinger International
https://www.hostg.xyz/SH13I (International)
https://www.hostg.xyz/SH2H (For India)
6 سال پیش
در تاریخ 1397/03/10 منتشر شده
است.
7,167
بـار بازدید شده