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.
Related
I dont understand why modal is not working:
<a class="modal-trigger" href="#modal1"><i class="material-icons icn_profile waves-effect">person</i>
</a>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
I try many solution like put the modal div outside the header section, and vary jquery script like:
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('#modal1').modal('open');
});
and more..
I can not be able to reach the solution here on stack overflow. I have also loaded jquery library before materialize.js at the end of the body section. The js console doesn't show any error.
thanks
There could be an error with the sequence of the scripts that you are bringing to your HTML.
NOTE: Since I don't know the relative paths of your css and js files, I gave them myself. Make sure to give them the correct path. Make sure that they are loaded on correctly to your DOM.
See if the following works for you.
<html>
<head>
<link rel="stylesheet" href="css/materialize.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<a class="modal-trigger" href="#modal1"><i class="material-icons icn_profile waves-effect">person</i></a>
<div id="modal1" class="modal">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Agree
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script src="materialize.min.js"></script>
<script>
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('.modal').modal();
});
</script>
</body>
Please follow the order. Jquery must come before materialize.js . Otherwise your code seems to work fine.
If the error persists, please tell me.
Also, I would like to add that the following piece of code:
$(document).ready(function(){
// the "href" attribute of the modal trigger must specify the modal ID that wants to be triggered
$('#modal1').modal('open');
});
will open the modal as soon as the page opens. Do you really want that behavior? The code I posted above works fine; when you click on the person icon the modal opens. That's the intended behavior desired usually. But otherwise also, if you want the modal to open as soon as the page loads, that will work fine as well.
Hope this helps. Thanks.
I kept trying until I got it. I don't know if this is what you want, but it works for me:
I have this in the header
declare let $: any;
after
openit(){
$('#modal1').modal('open');
}
and in my html
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" data-target="modal1" (click)="openit()">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal"materialize="modal" >
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
<a class="modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
Try adding this in your .js file:
//Modal trigger
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
});
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>
I have a confirmation dialog that is resurfacing on some pages so I thought that I can make a thymeleaf fragment for it.
I created a new html page (modal.html) and a div containing the modal:
<div th:fragment="confirm">
<div id="confirm" 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">Please confirm</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<a id="btn-confirm" class="btn btn-primary pull-right">Confirm</a>
</div>
</div>
</div>
</div>
</div>
Then I included it like this on the pages:
<div th:include="fragments/modal :: confirm"></div>
This kind of syntax worked for my header.
The problem is that it is visible at all times now.
When I include the same modal code on the page directly it only pops up when toggled.
Can someone help me?
Thanks!
The modal CSS class has display: none;, so it's hidden by default.
Your div that includes the fragment probably is inside an element that has a CSS class that sets the CSS display property to something different than none, and overwrites the modal CSS class.
Check in the developers extension (F12) the style of the element to see what overwrites the display property
And make sure you include
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"/>
I am building an ember application. I want to add a floating div over a page or floating modal, keeping the page active.
I have added the above code in the didInsertElement hook of the modal component.
i get an error draggable is not a function. Let me know if i can float a div on the page with or without using modal
<div id="floatModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" {{action 'close'}}>×</button>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
{{yield}}
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
#$('.modal-dialog').draggable({
handle: '.modal-header'
})
make sure you have included all JavaScript and css references
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
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;}