Pop-up Screen Using Bootstrap

Pop-up Screen Using Bootstrap:
In this article we are going to see how to create a pop-up window with the help of Bootstrap.

Whenever user clicks a button, a pop-up window will open in the same screen with background in light color.

We are going to use in-build class in Bootstrap for this purpose Modal.

Lets see these modal class in detail before we go ahead with coding,

class name = modal –> Creates a modal (pop-up window)
class name = model-content –> Designing modal window and also acts as a contained holding modal header, modal body and modal footer
class name = model-header –> Acts as a header for Modal
class name = model-body –> ┬áModal body
class name = model-footer –> Modal footer
class name = model – sm, modal – lg –> In built size of model window size, sm is small and lg is for large

In addition this, there are also few more modal events which can be used for better user experience

modal(“toggle”)
modal(“show”)
modal(“”hide”)

Now let us see an example of Modal

Please download Bootstrap for this or you can use the url for this bootstrap purpose

Output:

op1
After clicking the button,

op2

Leave a Reply

Your email address will not be published. Required fields are marked *