Loading bootstrap modal content only after clicking

Question

I am using Bootstrap 3 and I have a busy page. The modal content is loading with the page, no matter if the user clicked the button to open the modal or not. I want to save resources because this modal content is really big and busy, and my goal is to load specific Bootstrap Modal content only after clicking the button to open this modal.

How I can do this?

Thanks in advance.

Answer 1

take a look at the doc

http://getbootstrap.com/javascript/#modals

there is a "remote" option you can use for that (please note that "This option is deprecated since v3.3.0 and will be removed in v4.")

As suggested, you can use jQuery.load.

Move your content (modal content) in a separate file and load the content on the modal only when the user click on that button.

The workflow will be something like

button.click function {

open modal

load content

put content in modal body

}