We always use Modal as Popup in Bootstrap. But just with a little PHP & CSS, we can use it direct as page content. It’s useful when we want modal to behave as expected, popup at most of pages in our Bootstrap 4 powered web application. But wish to put it directly on a particular page with same content on popup.
For example. I want modal as popup for login/registration except at one place, the login page itself. There I wish to keep the login form always directly as page content without need to click a button and let it appear. This article will tell you, how can you keep modal as popup as well as render it on page as direct content.
Modal as Popup or Direct as Page Content
You can create modal without Bootstrap too. Check this article to create a responsive modal with animation using CSS only.
My first need is to modify modal markup a bit so that it can behave for both cases as I desire. See the code below:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?php $pm = isset($pm) && $pm !== false; $attr = $pm ? 'class="modal page-modal"' : 'class="modal fade" tabindex="-1" role="dialog" aria-labelledby="awesomeModalLabel" aria-hidden="true"'; ?> <div id="awesomeModal" <?php echo $attr; ?>> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="awesomeModalLabel">Modal | Popup or Page Content</h4> <?php if(!$pm) : ?> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <?php endif; ?> </div> <div class="modal-body"> <p class="text-secondary">This modal can appear as popup as well as a regular page content which appears directly on page.</p> <p class="mb-0">Right now it's just directly on page. Not as a popup.</p> </div> <div class="modal-footer"> <?php if(!$pm) : ?> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <?php endif; ?> <button type="submit" class="btn btn-primary">Button</button> </div> </div> </div> </div> |
Here you notice, I’m specifying modal’s root element attributes with a conditional variable $pm (pm as page modal). If the variable is not supplied or value of this PHP variable is false then modal with behave as popup else it will get render on page with styling of a Bootstrap modal.
Using this condition, I’m also hiding modal close icon as well as the button when it’s shown as a regular content directly on page.
Turn your Bootstrap dropdown menu to mega menu. Or read here if you wish to dynamically show content in one modal rather creating multiple modals.
CSS to Show Modal directly to page
The following CSS class will bring modal from hidden state to visible state and put it correctly within page inside it’s parent.
0 1 2 3 4 5 6 7 8 9 | .page-modal { position: relative; top: auto; right: auto; bottom: auto; left: auto; z-index: 1; display: block; } |
Show modal as direct page content
It will all work on condition. Just be careful, don’t render modal twice on same page, i.e. having modal as popup and also displaying it direct as page content on same web page. It will lead you to invalid markup and weird behavior.
You can turn WordPress pagination to Bootstrap style pagination as well.
On a page where it needs to appear as popup, just use Bootstrap provided data API. Like
0 1 2 3 | <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#awesomeModal"> Launch awesome modal </button> |
And when it’s needed direct on page itself, first set a variable $pm with value true and then call include() function from PHP.
0 1 2 3 4 5 6 7 8 9 | <?php $pm = true; //In native PHP include('path_to_your_modal_file.php'); //In WordPress include(locate_template('path_to_your_modal_file.php')); ?> |
We’re using this technique to let users login either through form modal as popup with Login link in navigation menu. Or they can login at this page where modal is shown direct as page content in Bootstrap 4. You should also check how to correctly use form in modal.