So I'm trying to force keep the bootstrap modal showing even on the toggle button click using $('#myModal').modal('show');
show method works when outside .click() function but says no such method when it is inside the .click() function
As such
$('document').ready(function() {
$('#my-toggle-button').click(function() {
$('#myModal').modal('show'); // Throws up the below error
});
});
Error:
Uncaught Error: Method show does not exist on jQuery.modal
at Function.error (jquery-2.2.4.min.js:2)
at n.fn.init.a.fn.modal (materialize.min.js:8)
at HTMLAnchorElement.<anonymous> (myScript.js:4)
at HTMLAnchorElement.dispatch (jquery-2.2.4.min.js:3)
at HTMLAnchorElement.r.handle (jquery-2.2.4.min.js:3)
However it works fine when
$('document').ready(function() {
$('#myModal').modal('show'); // Works fine
$('#my-toggle-button').click(function() {
});
});
Update:
Turns out it's being caused because of script imports having defer and aysnc. I don't know what's the right place to use these as they don't recognize modal.
This problem occurs when trying to execute a bootstrap modal when you are also using materializecss, the best recommendation is to use the materializecss modal.
http://materializecss.com/modals.html
//initialize all modals
$('.modal').modal({
dismissible: true
});
//call the specific div (modal)
$('#modal2').modal('open');
Enjoy!
If you are using materializecss then just include it before bootstrap like this
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="/static/js/bootstrap/dist/js/bootstrap.js"></script>
Then you can use this function to display modal
$("#modalId").modal('show');
Please, check the reference to bootstrap.js or bootstrap.min.js file. The file must include modals component. Also you need to check identificators of the modal and the button. The code must work fine, see the snippet below.
$('#my-toggle-button').click(function() {
$('#myModal').modal('show');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>
<button id="my-toggle-button" class="btn btn-default">Push Me</button>
Related
In my Laravel project , I use AdminLTE and I want to use modals in it.
all part of AdminLTE works great. but, I can't use modals. I don't know how to use it. should I add any js code for it?
scripts:
<script src="{{asset('bower_components/jquery/jquery.js')}}"></script>
<script src="{{asset('bower_components/bootstrap/dist/js/bootstrap.js')}}"></script>
<script src="{{asset('bower_components/admin-lte/dist/js/adminlte.js')}}"></script>
<script src="{{asset('bower_components/datatables.net/js/jquery.dataTables.js')}}"></script>
<script src="{{asset('bower_components/datatables.net-bs/js/dataTables.bootstrap.js')}}"></script>
<script src="{{asset('bower_components/select2/dist/js/select2.js')}}"></script>
<script src="{{asset('bower_components/select2/dist/js/select2.full.js')}}"></script>
I want to have some thing like this : https://adminlte.io/themes/AdminLTE/pages/UI/modals.html
Its not Related to Laravel As long as it concerns The modals and Design
so now you have To Check your console For any Error And see If there is any error on console for that modal and if not you have to check any kind of js for modal or bootstrap for modal and in the end you can check from this link for cdn usage of modal plugin for bootstrap :
https://cdnjs.com/libraries/bootstrap-modal
and if not finally check the atrribute of modal and bottuns :
<!-- 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 id="myModal" class="modal fade" 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>
this is an example paste this code and check if its working on your project .
I had mistake in css loading and also I didn't add modal's js file :
<script src="{{asset('bower_components/bootstrap/js/modal.js')}}"></script>
Im using bootstrap 4 js and I have the link below to open a modal:
<a id="show_login_modal" href="">Login</a>
And then the modal:
<div class="modal fade" id="login_modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
...
</div>
But I want to open the modal with default jquery so I have the code below:
$('#show_login_modal').click(function(){
$('#login_modal').modal('show');
})
$('#close_login_modal').click(function(){
$('#login_modal').modal('hide');
})
The issue is that like this when the login link is clicked it appears like a fade and then the fade disappears but the modal dont opens. Do you know why?
Kindly check if you have not included jquery twice. this probably happens due to that also.Also in some cases plugins create issues as well.
Make sure to put libraries in required order to get the result:
1- First bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js
(In other words, jquery.min.js must be called before bootstrap.min.js)
After ensuring the above kindly try the below snippet.
<a id="show_login_modal" href="javascript:void(0)">Login</a>
then write your jquery code.
what is happening is that the empty href is not allowing the popup to open up, just do javascript:void(0) followed by your code.
The only way I can reproduce your results is by leaving the href attribute present and set to href="". Removing it or setting a hash value (href="#") bypasses the problem and would be my recommended solution.
That, or transforming that element to a <button> to bypass hyperlink default behavior entirely.
$('#button_modal, #link_modal').click(function(){
$('#login_modal').modal('show')
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<button id="button_modal">Login</button> or <a id="link_modal">Login</a>
<div id="login_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Modal header</h3>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>My modal content here…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I would also note that while you're activating your Modal via JavaScript, it's not necessary to rely on JavaScript to also CLOSE your modal. The data-dismiss attribute baked into the Modal structure will function regardless of how the modal was initialized.
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 am attempting to make a Calculator in JavaScript. I'm almost at the end, so I added a modal through Bootstrap, which contains an instruction list(somewhat like a manual). While the modal works perfectly on my local machine, it works only halfway through in CodePen.
The issue appears to be that a click on the button brings up the modal but it does not go away if you click on the "Close" button or even the "cross" icon on the modal. It looks like the modal is disabled when it opens up, and the only way to get everything working again is to refresh the codepen link.
As I'm making this calculator for an online tutorial exercise, I need to submit it via CodePen only. So I've got to make this work.
Here's the relevant HTML -
<div id="instructions">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">
Launch Instructions
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Instructions</h4>
</div>
<div class="modal-body">
<ul class="list-group">
<li class="list-group-item">Click on the AC button before beginning each new calculation.</li>
<li class="list-group-item">For square root of a number, first press the number then press the square root button.</li>
<li class="list-group-item">An operation that results in a number too large to fit on the screen will display zero instead.</li>
<li class="list-group-item">If a number has too many digits after the decimal point to fit on screen, some of the digits will be truncated.</li>
<li class="list-group-item">Some operations like divide by zero, and square root of negative integers are not permitted.</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
In CodePen, I've added BootStrap through CSS quickadd, and for JS, I added jQuery and then Bootstrap(in that order), so I'm not sure why it doesn't work. I have followed the same order in my local files, where the modal works perfectly-
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="4.js"></script>
Here's the CodePen link for my calculator. Interestingly though, I made another Pen here where I was testing just the modal bit, and it works just fine here.
It is happening because you have made position of instructions fixed.
As you had made #instructions fixed, which is the parent of modal, the modal was relatively above its parent(#instructions), but the parent(#instructions) itself was below the backdrop(<div class="modal-backdrop fade in"></div>) as it's(#instructions) z-index was not set which gets created when you open a modal window.
If I remove position fixed from the div instructions your modal works fine.
Instead of fixing the div to the bottom you can directly apply the CSS on the button.
#instructions button {
position: fixed;
left: 44%;
bottom: 0;
}
Or else you could just move the #instructions above the backdrop div.
#instructions{
z-index: 1049;/*keeping z-index above 1040*/
position: fixed;
left: 44%;
bottom: 0;
}
A small demo of the same issue, where one cannot click on close buttons inside the modal in Chrome whereas the buttons are clickable in FF. Here the modal is placed inside another container whose position is fixed.
Try getting the z-index of modal's parent in FF and Chrome.
In this demo $('.parent').css('z-index');
Chrome z-index is set to 0
FF z-index is set to 'auto'
This explains the above issue.
$(function(){
$('.modal-body > span').html($('.parent').css('z-index'));
});
.parent{
position: fixed;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="parent">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal testing</h4>
</div>
<div class="modal-body">
z-index: <span></span>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
I had this problem too.
Problem is comming from html, created by bootstrap js:
<div class="modal-backdrop fade in"></div>
This line is created directly before end of element. This cause "z-index stacked element problem." I believe that bootstrap .js do creation of this element wrong. If you have in mvc layout page, this script will cause still the same problem. Beter js idea cut be to get target modal id and inject this line to html before...
this.$backdrop = $(document.createElement('div'))
.addClass('modal-backdrop ' + animate)
.appendTo(this.$body)
SO SOLUTION IS repair bootstrap.js - part of modal:
.appendTo(this.$body)
//REPLACE TO THIS:
.insertBefore(this.$element)
SOLUTION 2:
add to your page this script:
$('.modal').appendTo("body")
Solution3:
Add to css:
.modal-backdrop{display:none;}
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>