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.
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!!
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
}
});
});
Of course you should write one modal and generate content on demand. If you will go with the first option then every time you will need to make a change in the common area you will have to change +150 files! That's very bad approach.
You need to remember that web application should be consistent. This way you will save yourself a lot of time and effort.
Also, how do you plan to pull it off. Load 150 modal windows at once and than wait for data ?:P
The way I see it - create one modal that will be a framework and then fill it with data, maybe add stuff if you need it in other template file for specific case.
Cheers!
Load the data dynamically using jQuery. I'm assuming you have buttons to open each modal?
http://jsfiddle.net/h3WDq/
$('#myModal1').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
// Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. I'm using use jQuery here, you could use it to load your data
var modal = $(this)
modal.append("<p>Test</p>");
})
Related
I'm learning on how to popup modal when a page load. For example when I click on a button in home.html that is linked to comment.html, when comment.html load then modal popup. But if I navigate to comment.html without clicking on the button then modal will not popup. Let modal only popup when I click on the button.
home.html
<!-- Another button that linked to comment without mod data-target -->
# I do not want Modal to popup in comment.html when I click on this button
Comment
<!-- Button trigger modal -->
# I want modal to popup in comment.html when I click on this button
<a href="{% url 'site:comment' %}" data-toggle="modal" data-target="#basicExampleModal">
Launch Modal in Comment
</a>
comment.html
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
$(document).ready(function(){
if(localStorage.getItem('popState') != 'shown'){
$("#basicExampleModal").delay(2000).fadeIn();
localStorage.setItem('popState','shown')
}
$('#basicExampleModal').modal('show');
});
The above code will create a popup Model automatically! Hope you find it useful.
In short:
create a local storage data item (for example item name being: showModalInCommentPage) before navigating to the comments page
on loading comments page check if that local storage data item (showModalInCommentPage) exists
if exists load the modal and remove the local storage data item (showModalInCommentPage)
in home templates file
<!-- If modal should not be shown -->
Comment
<!-- If modal should be shown : create local storage item on clicking the a tag -->
Launch Modal in Comment
in comments template file
<script>
$(document).ready( function() {
var showmodal = localStorage.getItem('showModalInCommentPage');
if (showmodal == '1') {
$('#basicExampleModal').modal('show');
localStorage.removeItem('showModalInCommentPage');
}
});
</script>
I'm using session storage to show and hide a modal when loading the page for the first time. I don't know how to use cookies so I just use session storage.
In the modal, I change the header and the close button when you close it for the first time, then is accessible as a "help modal" instead of "getting started".
I want to prevent to close the modal with esc if the session storage is not set up and is in "getting started" mode, but when you close the modal and you reopen it as a "help modal" enable the esc event.
At the moment I make it work at 50%, first time you can't use esc but if you open it as a "help" you still can't use esc, although, if you reload the page esc it works,
Here is the else part of my code, effective when the session storage is not setup:
} else {
// show the help modal
$('#help').modal({
keyboard: false
});
$('#help').modal('show');
$('#help').on('hidden.bs.modal', function (e) {
keyboard: true
})
}
The documentation (https://getbootstrap.com/docs/4.0/components/modal/#events)
said that the .on('hidden.bs.modal' event is fired when the modal has finished being hidden from the user.
Which event I have to use to make it works as I want?
As it seems, you cannot simply re-configure an already initialized modal by supplying new options object to it. Meaning that if you do the following:
$('#help').modal({
keyboard: false
});
$('#help').modal({
keyboard: true
});
…than the latter statement won't have any effect.
So, in order to overcome this, I would suggest to destroy the first modal –the one with keyboard: false– and create a new modal that listens to keyboard events too.
Check the working snippet below.
Note: the first modal is created at pageload from code using keyboard: false, while consecutive modals launched by the button are set with the defaults, so with keyboard: true.
// } else {
// show the help modal
$('#help').modal({
keyboard: false
});
// Note the `one` binding
$('#help').one('hidden.bs.modal', function (event) {
$('#help').modal('dispose');
});
// }
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#help">
Open Help
</button>
<div id="help" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">HELP</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>This is the Help modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
From my login page user clicks on a ForgotPassword link and goes to this page to fill up a form and request a new password
http://localhost:2350/Account/ForgotPassword
Now when they click Save in that page, their request has been created.
So All I need is just a Bootstrap Modal dialog to pop up and say "Your Request Has Been Submitted" and a "OK" button on it, when they click OK it takes them back to login page.
I have never doen Ajax,Popup dialog, etc.. like this. Can you point me to some tutorial code that is not too complex to follow and reproduce? because my modal is really simple, contains no data, just has a static text and an OK button that redirects to login page on it.
You can setup your Bootstrap Modal like this:
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
Launch Modal
</div>
<!-- Modal -->
<div id="myModal" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Modal Example</h3>
</div>
<div class="modal-body">
<p>
This is your body
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button id="submitButton" class="btn btn-primary">OK</button>
</div>
</div>
</div>
And in your JavaScript code, you catch the click event of the OK button. Then, call ajax and redirect to login page.
$('#submitButton').click(function() {
// Call AJAX here
$.ajax({
method: "POST",
url: "", // Your URL here
data: "" // Your data here
});
// Redirect here
});
Please check this jsfiddle for more detail.
I am trying to trigger the modal popup manually via Javascript $("#myModal").modal() as you can see I inserted it inside this function that analyzes the correct answers and displays a short message yet it did not work.
Here's my code:
function showFinalResults() {
$("#myModal").modal()
content.innerHTML = "<h3>WELL DONE!</h3>" +
"<p>You're amazing for taking this quiz. Not many people challenge themselves every now and then. It's always good to stay confident with any challenges that may come your way.</p>" +
"<h3>" + score + " out of " + quiz.length + " questions, " +
Math.round(score / quiz.length * 100) + "%<h3>";
}
Here's the html for the modal:
<div class="container">
<h2>Basic Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</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>
Modal scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Here is a working code snippet: http://codepen.io/steveharrison/pen/ONgWdL
Your HTML looks correct and $('#myModal').modal() is the correct way to trigger the modal. Try using the following JS and see if it works (edit: forgot to mention this assumes you have a button element with class open-modal, like in above CodePen).
$(document).on('ready', function() {
$('.open-modal').click(function() {
$('#myModal').modal();
});
});
My guess is that there's an error when you're trying to set the content of the modal... check your console and see if there are any errors.
Update
It was not working due to the fact there was a $ function manually defined which was conflicting with jQuery's $ fn... and both behaved quite differently (and hence setting, say, .innerHTML on such elements like content not working as expected). I replaced this $ fn with regular jQuery selectors, added in the modal HTML he included above, and it's now working (incomplete, but the modal is functional): https://jsfiddle.net/th8dvbo2/3/
To trigger modal for show hide you can use something like this
$('#myModal').modal('hide');
and
$('#myModal').modal('show');
so instead of
$("#myModal").modal();
you can use the above code
I'm implementing a Bootstrap HTML application that using Modal as confirm dialog, and it could be a modal inside another one. For example I open modal, then I click something on that modal, the first one will be hidden, and open another modal.
From Bootstrap 3.3.6, they are supporting to add a margin-right automatically, and hide the vertical scroll bar, however once the second modal is opened, the scroll bar is not disappeared, and if I close and open again these modals several times, the margin-right will be increased from 17px to 17x2px, and 17x3px ...
I don't know how to solve that problem with Bootstrap modal, or any workaround, I'm also thinking about Angular that keep only 1 modal, and change the modal content (including header, body, and footer), and each modal will be introduced in a separated HTML template, and angular will load a particular template for each modal, but I'm not have much experience with these workaround with Angular.
Here is the sample page that I created for my problem, the page had long content, with Open Modal button, click to open first modal, then click on Open Second Modal to dismiss the first one and open the second one. If you do that several time, you can see that the margin right is increased, and a white line at the right.
http://plnkr.co/edit/iUuWaSvgDcaKQPTp1Yb2?p=preview
You have written data-dismiss and data-target on one click itself, which is not wrong but internally bootstrap modal has an animate function which takes its own time (appx 500ms). So it would be better if you control it through jqyery.
see below code.
$("#secondModal").click(function(){
$("#firstModal").modal('hide');
setTimeout(function(){
$("#secondModal").modal("show");
},500)
});
The modal method is already integrated within the bootstrap.js which you use.
So it will not show your margin which occurs at runtime.
You can easily handle using stylesheet according bootstrap modal display once into another bootstrap modal.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" id="myBtn">Click here</button>
<div class="modal fade modal-admin" 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">
<button type="button" class="btn btn-primary" id="modelbtn">Click here</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade " id="myModal1" 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" id='close' class="btn btn-default" data-dismiss="modal" ng-click=''>Close</button>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
$(document).ready(function(){
$("#close").click(function(){
$('.modal-admin').css('width', '500px');
});
});
$(document).ready(function(){
$("#modelbtn").click(function(){
$('.modal-admin').css('width', '200px');
$("#myModal1").modal();
$('#myModal1').css('margin-left', '200px');
});
});
</script>
</html>