I am playing around with a sample note manager app built using meteor/materialize/jquery.
I am having problems with my modal not popping up like it should when a button is clicked.
Here is the code for my modal:
<template name="add">
<div id="addNote" class="modal">
<div class="modal-content">
<h3>Add Note</h3>
<form class="add-form">
<input type="text" name="text" placeholder="Add note...">
</form>
</div>
</div>
</template>
This is the button that then when pressed should open the modal.
<li class="nav-item">
<button id="addNote" class="waves-effect waves-light btn" href="#addNote">Add Note</button>
</li>
I also have this jquery code which is apparently to initialize the modal.
<script>
$(document).ready(function(){
$('.modal').modal();
});
</script>
When I click on the button, the modal does not pop up like I believe it should.
When I add this one line of code, the modal is open by default upon reloading the page.
<script>
$(document).ready(function(){
$('.modal').modal();
$('#addNote').modal('open');
});
</script>
Therefore I would think that by doing something such as
<script>
$('#addNote').click(function() {
$('#addNote').modal('open');
});
</script>
or by doing
<button onclick="myFunction()"></button>
However, neither one of them are working as expected and the modal will not open. Does anyone know what I am doing wrong here?
This is probably happening because the button and the div have the same id of "addNote".
Try changing the id of the button and then the jQuery script.
<button id="addNoteButton" class="waves-effect waves-light btn"
href="#addNote">Add Note</button>
<script>
$('#addNoteButton').click(function() {
$('#addNote').modal('open');
});
</script>
It's already an old question and with found solution (despite no accepted answer?), but been playing with this right now. I think some clarifications will help.
Was that your whole code? If not, check the line if having .modal initiated first.
$('.modal').modal();
You have omitted that part when describing details in your further steps.
<script>
$(document).ready(function(){
$('.modal').modal();
$('#addNote').click(function() {
$('.modal').modal('open');
});
});
</script>
Was able to fix by using the following code
<li class="nav-item">
<button name="addNoteButton" class="waves-effect waves-light btn" href="#addNote" onclick="$('#addNote').modal('open');">Add Note</button>
</li>
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<div class="row section">
<div class="col">
<!-- Modal Trigger -->
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<p>You have to include jQuery and Materialize JS + CSS for the modal to work. You can include it from CDN (getting started).
</div>
</div>
<!-- Modal Structure -->
<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>
opening model using materialize css
I think you must have to specify a modal-trigger on your trigger button as bellow. just try it.
HTML
<li class="nav-item">
<button type="button" id="addNote" class="waves-effect waves-light btn modal-trigger" href="#addNote">Add Note</button>
</li>
JS
<script type="text/javascript">
$(function(){
//the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$(".modal").modal();
});
</script>
If following the guide on materialize css, I ran into this error for awhile, only to find out that it was the import order, you have to import jQuery before importing materialize.js!
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);
});
I am designing a website where i have put the modal for signup that when the user click on signup button the modal will came up but here in my website modal is working properly but content in it is not clickable please help me out.Here is my coding.
<li>signup</li>
<div class="modal hide fade" id="show">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h1>Tittle</h1>
</div>
<div class="modal-body">
<p>The modal Body</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
And the java script i have written for it is here.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
$("#showup").click(function(){
$("#show").modal();
});
</script>
The screenshots of modal will be helpful for understanding me.
These are good login modal example, you can see them to see how they were written :
Modal with tabbed content
Login form in a modal
use anyone of them the normal way you put your modal please see this see this link for more explanation: modal
i hope they will help you.
Try to use something like:
.modal {
z-index: 10000;
}
It's probably because the z-index of your modal is lower than the z-index of other element. So try to use firebug or chrome inspector tools to figure it out
Any modal that I am creating using twitter bootstrap fails to appear. I'm not sure what I'm doing wrong seeing that I set up a test modal using the code that bootstrap provides and it still doesn't work.
Here is my code (body only):
You need to link to bootstrap.js, bootstrap-modal.js, jquery.js, and bootstrap.css
<body>
<div class="modal hide" id="myModal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×
</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>
Modal body would go here...
</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<a data-toggle="modal" href="#myModal">Show Modal</a>
</body>
And here are links to the bootstrap package and jquery that a bootstrap modal needs:
bootstrap package
jquery
My problem was that I was including both boostrap.js and bootstrap-modal.js. Apparently if you include bootstrap.js you shouldn't also inlclude bootstrap-modal.js because boostrap.js imports all of the javascript plugins that it is compatible with. Something like that. After deleting my boostrap-modal.js script link it worked.
You have to call:
<script>
$('#myModal').modal('show')
</script>
After the </body> tag. Or if you only want to call it when the user clicks on something:
$('#button_id').click(function(){
$('#myModal').modal('show')
});
I am trying to get a simple bootstrap's modal sample to work, I follow this document which says " You can activate modals on your page easily without having to write a single line of javascript. Just give an element a data-controls-modal attribute which corresponds to a modal element id, ...", but I have done whatever I could and had a huge amount of research still can not get this simple modal to work.
<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
I have either this:
<a class="btn" data-controls-modal="myModal">Launch Modal</a>
or this:
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
button to activate the modal, I have loaded the bootstrap-modal.js on the page as well. Unless I added a javascript line to handle the "Launch Modal" click event, when I click on "Launch Modal", nothing happens at all, are there anything that I have missed?
I finally found this solution from "Sven" and solved the problem. what I did was I included "bootstrap.min.js" with:
<script src="bootstrap.min.js"/>
instead of:
<script src="bootstrap.min.js"></script>
and it fixed the problem which looked really odd. can anyone explain why?
Fiddle 1: a replica of the modal used on the twitter bootstrap site.
(This is the modal that doesn't display by default, but that launches when
you click on the demo button.)
http://jsfiddle.net/9RcDN/
Fiddle 2: a replica of the modal described in the bootstrap documentation,
but that incorporates the necessary elements to avoid the use of any javascript.
Note especially the inclusion of the hide class on #myModal div, and the use of data-dismiss="modal" on the Close button.
http://jsfiddle.net/aPDVM/4/
<a class="btn" data-toggle="modal" href="#myModal">Launch Modal</a>
<div class="modal hide" id="myModal"><!-- note the use of "hide" class -->
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close<!-- note the use of "data-dismiss" -->
Save changes
</div>
</div>
It's also worth noting that the site you are using is running on bootstrap 2.0,
while the official twitter bootstrap site is on 2.0.3.
Also have a look at BootBox, it's really simple to show alerts and confirm boxes in a bootstrap modal. http://bootboxjs.com/
The implementation is as easy as this:
Normal alert:
bootbox.alert("Hello world!");
Confirm:
bootbox.confirm("Are you sure?", function(result) {
Example.show("Confirm result: "+result);
});
Promt:
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
Example.show("Prompt dismissed");
} else {
Example.show("Hi <b>"+result+"</b>");
}
});
And even custom:
bootbox.dialog("I am a custom dialog", [{
"label" : "Success!",
"class" : "btn-success",
"callback": function() {
Example.show("great success");
}
}, {
"label" : "Danger!",
"class" : "btn-danger",
"callback": function() {
Example.show("uh oh, look out!");
}
}, {
"label" : "Click ME!",
"class" : "btn-primary",
"callback": function() {
Example.show("Primary button");
}
}, {
"label" : "Just a button..."
}]);
I had an issue with Modals as well. I should have declare jquery.min.js before bootstrap.min.js (in my layout page).
From official site : "all plugins depend on jQuery (this means jQuery must be included before the plugin files)"
I run into this issue too. I was including bootstrap.js AND bootstrap-modal.js.
If you already have bootstrap.js, you don't need to include popover.
For me the bootstrap modal was showing and disappearing when I clicked the button tag (in the markup the modal is shown and hidden using data attributes alone). In my gulpfile.js I added the bootstrap.js (which had the modal logic) and the modal.js file. So I think after the browser parses and executes both the files, two click event handlers are attached to the particular dom element (one for each of the files), so one shows the modal the other hides the modal. Hope this helps someone.
Try skipping the p tag or replace it with a h3 tag or similar. Replace:
<p>One fine body…</p>
with
<h3>One fine body…</h3>
It worked for me, I don't know why, but it seems the p tag is somehow not fully compatible with some versions of Bootstrap.
A better solution is to load a twisted version of bootstrap.js without jquery. Get it from http://daniemon.com/blog/bootstrap-without-jquery/
<script src=".../bootstrap-without-jquery.min.js"></script>
Going this way will save you trouble from script tags.
Also,
If you're running your page from Visual Studio and have installed the bootstrap package you need to make sure of two things
That you've also gotten the Bootsrap Modal Dialog package (very important)
You've added it to bundle.config if you're using bundling.
I was having this same problem using Angular CLI. I needed to import the bootstrap.js.min file in the .angular-cli.json file:
"scripts": ["../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"],
A simple way to use modals is with eModal!
Ex from github:
Link to eModal.js <script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>
use eModal to display a modal for alert, ajax, prompt or confirm
// Display an alert modal with default title (Attention)
eModal.alert('You shall not pass!');
You must call your Bootstrap jQuery plugin so that it will trigger.
<div class="modal fade bs-example-modal-lg" id="{{'modal'+ cartModal.index}}">
<div class="modal-dialog modal-lg" 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>
</div>
<div class="modal-body">
<div class="col-lg-6" >
<p class="prodTitle" ng-bind="(cartModal.product.p_name|uppercase)"></p>
<p class="price-para">
<span class="currency-cls" ng-bind="cartModal.product.c_currency"></span>
<span class="price-cls" ng-bind="cartModal.product.p_price"></span>
</p>
<p class="select-color">
<span ng-repeat="color in cartModal.product.p_available_options.colors">
<button id="color-style" ng-click="cartModal.saveColor(color)" ng-style="{'background-color':color.hexcode}"></button>
</span>
</p>
<br>
<p class="select-box">
<span class="size-select-cls">
SIZE:<select ng-init="items=cartModal.product.p_available_options.sizes" ng-model="cartModal.selectedSize" ng-options="item.code as
item.name for item in items"></select>
</span>
<span class="qty">
QTY:<input type="number" min="1" ng-model="cartModal.selectedQty"/>
</span>
</p>
<p class="edit-button">
<button class="btn-primary btn-lg" data-dismiss="modal" ng-click="cartModal.save();cartModal.calculate()">EDIT</button>
</p>
</div>
<div class="col-lg-6">
<img ng-src="{{cartModal.product.imageSrc}}">
</div>
</div>
</div>
</div>
</div>