Menu Close
    Hire us Request quote Reading list Switch to dark mode

    How to display a bootstrap modal inside a div

    Here in this post we will learn how to make a bootstrap modal open inside a div.

    For example

    We have the following HTML Structure

    Now what we need to do is to open a bootstrap modal inside the blue div on the click of a button.

    So to do so follow the steps given below :-

    . . .
    Subscribe Articles

    Just enter your email below to subscribe and receive weekly updates about the most interesting similar articles.

    You need to accept conditions to receive letters.
    You've Subscribed!

    Share article via

    . . .
    1.  Write the HTML code for the bootstrap modal inside the blue div .
    2.  Write the following Javascript Code
    3. Write the following CSS for it
    4. That’s It

    You can also visit this fiddle  for a quick working demo.

    Logic Behind The Scene

    To show a bootstrap modal inside a div the logic behind the above code is to append the HTML code of the modal as well as the modal-backdrop inside that specific div(blue div whose position is relative)  and then making the CSS for modal and modal-backdrop to position:absolute so that the modal and its background gets positioned relative to its parent .

    For those who don’t know what a modal-backdrop is, the answer is that its a div appended whenever a bootstrap modal appears by the modal plugin so as to provide a click area for dismissing shown modals when clicking outside the modal.In short its that translucent dark background behind a bootstrap modal.

    . . .

    Comments (2)

    Add Your Comment

  • sharad
    Friends now u can easily change Modal Popup Size Accourdingly
    i found new idea for that just add Style after modal-dialog Class
    Ex :
  • Vivek Sinha
    but when you resize modal dialogue size is not changing relatively with others
  • Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again

    Table of Content

    Hide Index