Menu
In a page, there are around 150 submenus (expandable). Every click on a submenu opens a modal with specific information for the submenu. Data is fetched initially when the page loads. I wonder what is a better way to implement the modals.
Should I write 150 modals in the same page, or write one modal then create the content dynamically?
For the latter option I need an example.
Technologies used: Bootstrap, HTML, CSS, jQuery.
439
It is possible for multiple modals to contain more than two modals (hence our usage of the name multiple modals rather than the term double modals that many sources use).
To open a modal from another modal can be done simply by using the events that Bootstrap provides such as show.
There are ways to avoid these repetitions. To name a few, you could use context, event emitters or state app management libraries like Redux. This article is going to show you how you can achieve this using context, which is built into React so no need to import other libraries.
You might like this example i have created, Let me know if you dont understand any where.
$(document).ready(function(e) {
// Initializing our modal.
$('#myModal').modal({
backdrop: 'static',
keyboard: false,
show: false,
});
$(document).on("click", ".modalButton", function() {
var ClickedButton = $(this).data("name");
// You can make an ajax call here if you want.
// Get the data and append it to a modal body.
$(".modal-body").html("<p>" + ClickedButton + "</p> <p>Some text in the modal.</p> ");
$('#myModal').modal('show');
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 1" data-toggle="modal">Open Modal 1</button>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 2" data-toggle="modal">Open Modal 2</button>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 3" data-toggle="modal" >Open Modal 3</button>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 4" data-toggle="modal">Open Modal 4</button>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 5" data-toggle="modal">Open Modal 5</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>You can just create a single modal. and as you have mentioned you will have 150 menu so you can give them a common class name and using a jquery get the click event of those button/menu. You can have some ajax call to get some dynamic data if you want. append your response to the modal body and just show the modal. Thats it!!
67
You can write one modal in your page. Then, every time you click a submenu, call an asynchronous function to get the appropriate data, append them to the modal and show it:
jQuery
$(document).on('click', '.submenu', function() {
$.ajax({
url: 'path/to/file',
method: 'POST',
data: { ... },
success: function(data) {
// Get the data and fill the modal
// Show modal
$('#myModal').modal('show');
},
error: function() {
// Error handling
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
