This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
As of Bootstrap 3.1.1 modal behaviour has changed. When you load remote content into the modal, the revised behaviour sees the content loaded into the modal's root. This destroys the modal's internal layout, meaning that the remote content will need to be modified to mimic the layout. For many user's that will be impractical. | |
To reinstate the old behaviour we're going to hijack Bootstrap 3.1.1's modal behaviour a hair. This will be done using Bootstrap 3's documented modal mark up, so the behaviour should be seemless. | |
I'm going to keep the code variable heavy and descriptive so those new to Javascript can follow along. One of the bonuses of Bootstrap is that it democratizes mobile first and responsive development to new coders. I'm also assuming the presence of JQuery. Javascript heavy lifter types will handily streamline the code. | |
For reference here's a link that invokes a BS3 modal: | |
<li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li> | |
In youre Javascript you're |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
It's easy to make popup windows without Twitter bootstrap or Javascript. | |
Example below uses :target pseudoclass to do it. | |
It adds one extra <a> tag to HTML, used as anchor (see comments in HTML file). | |
And it adds just 2 lines of CSS to show popup and its background. | |
You can have as many popups as you need - they will all work. |