Instructions to make Multiple Bootstrap Modals and step Modal simple Bootstrap in just 15 minutes

Tram Ho

Introduce

  • Most websites today use popup . POpup in addition to the effect of notice notice, the need to confirm is ok or cancel. It is also used to show some benefits such as product details, payment … but the staff who do not want to switch from page to page #, can still see information about what they need to know in provide 1 page.
  • And Bootstrap is a framework that a lot of programmers love and use. Modal bootstrap is a component in bootstraps that allows popup display with custom size and effects

Create popup with modal bootstraps

  • Explanation: When you click on the Launch demo modal button, the popup appears. Please pay attention to the following code data-toggle="modal" data-target="#exampleModal"
  • Inside:
    • data-target = “# exampleModal” is used to determine which popup is called (if there are multiple popups on the same page), in the above example is the popup with id #exampleModal
    • data-toggle = “modal” is a command to open a Modal Popup in Bootstrap
  • The popup you want to show out is this code: In that popup you want to add what you want to add, it depends on you.

Instructions for making Multiple Bootstrap Modals

  • What is Multiple Bootstrap Modals. Is the appearance of the second or third popup above the first popup
  • It’s very simple, you also do Popup as usual and you want the following popup to appear as well as make a modal popup.
  • For example:

  • Explanation When you want the 2nd modal to appear, you just need to. for data-target = “id pop up you want to show”. example above data-target = “# exampleModal2”
  • But that is not enough. When it comes up you will see the background overlay appear darker. The following popup will be in the top popup and will look like the following image
  • To fix such errors, what should I do? Simply edit the following:
  • at html in popup2: add class: modal-second

  • At css you add the following code:

  • At js you add the following code:

So you have completed multiple modal.

Step modal instructions

  • What is step modal: the same popup when you click on this button will move to the following modal with different content from the original content.
  • First you just create a modal popup as usual

Conclude

  • I have shown you how to build modal bootstrap, Multiple Bootstrap Modals and step Modal bootstrap. You see it or can apply it in current project or future project. And see there is a better way you can share more in the comments
Share the news now

Source : Viblo