Im new in web application and i came across the modal feature in bootstrap, i did researched and came across some examples that works perfectly fine but when i tried to copy what they did, an underlying image or panel or i dont know displays behind the modal... how to remove this? ive been trapped in this thing for like 3 days.. haha.. thanks...
Here is the image:-
and the code from w3schools... this should work but i dont know why..
<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>
As I checked your code of modal, This is coming fine.
check here
The problem is in your html kindly show us the entire html so that we can debug your code.
hi your code is working just fine. i find no problem with it.
output of the code
hopefully problem with the browser?
Related
I have developed a simple js pig game. You can see it here: http://creativeartbd.com/demo/game/js-pig-game
At first, it will open a Bootstrap Modal box to set a winning score. Now, the game will begin by click on the Roll Dice button.
Well, now if you WIN then you can press the New Game button to re-play the game. Here, I want to open the bootstrap modal again when I click on the New Game button. For that I have write this code:
document.querySelector(".btn-new-game").addEventListener("click", function () {
init();
document.getElementById("myModal").modal('show');
});
but it's showing me an error message on console log:
Uncaught TypeError: document.getElementById(...).modal is not a function
Maybe this is because of Javascript IIFE. I don't know exactly :(
I have also tried with this code:
document.getElementById("myModal").click();
but no luck :(
My HTML and js code is a bit long that's why I don't put here. You can find it here: https://jsfiddle.net/r8cga7L5/
Thanks.
Modify the button like this,
It's working perfectly fine
<button data-toggle="modal" data-target="#myModal" class="btn btn-new-game">New Game(+)</button>
Any specific reason you want the modal to open from JS?
Try this for the Bootstrap 4 approach:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal" id="exampleModal" 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>
You can just call it like this:
document.getElementById("myModal").modal();
I want to make a website (done). Then I´m adding at least 30 buttons, and when you press the first button, a simple modal comes up with the ability to close, but when you press the second button, the same thing happens! It's just another content.
Let me try to tell you this in my bad programming language.
<div class="button" id="modal1">1</div>
if pressed = "modal1" opens.
<div class="button" id="modal2">2</div>
îf pressed = "modal2" opens with different content.
I would add some code, but I haven´t got any longer than the Bootstrap: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_modal&stacked=h
just check this link http://www.w3schools.com/bootstrap/bootstrap_modal.asp it explain how modal works. You must have data-toggle="modal" data-target="#myModal" in item you click to open modal and you need mention "#myModal" as id of the target modal, use different id to open different modal.
Using the sample you linked, I copied and pasted the first model div to a second and made minor changes so you can see the difference when clicking on the buttons.
I then copied and pasted the button, and changed the data-target attribute in the second button to match the div I added.
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<!-- data-target in the first button matches the id of the first div below -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- the second button data-target matches the id of thj e second div below -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">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>
<!-- this is copied from the first div, given its own id -->
<div class="modal fade" id="myModal2" 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 2</h4>
</div>
<div class="modal-body">
<p>Some text in the modal. model 2</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 see my three modals, like i said you just need to change data-target="#myModal1" and id="myModal1"
`https://jsfiddle.net/milanpanin/b2pyb6Lq/
If you use Bootstrap modal u need just to change data-target and crate modals for all buttons.
Ok, so I attempted to implement a modal to my website but to my dismay, I've run into a problem where the firstly the modal is faded out and secondly, the text doesn't display nor am I able to click away.
The modal on my website
<button type="button" class="btn btn-blue btn-effect" data-toggle="modal" data-target="#myModal">HORRAY!</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">
Close
edit: I'm very new to Javascript, I only start coding again after a 5 year hiatus
edit: after trying fiddle, i've come to a guess that it's an issue in my css
If your code is like this one, I believe the problem is in the space between data-dismiss. Despite that your code works just fine
<button type="button" class="btn btn-default" data- dismiss="modal">Close</button>
http://jsfiddle.net/3kgbG/1637/
Suppose I have a series of modals in same page opened by clicking on different pictures. 2 of them like this:
<!-- FIRST MODAL -->
<div class="modal fade" id="modal1" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title boldfont">THIS IS MODAL 1 HEADER</h3>
</div>
<div class="modal-body">
<img src="images/lorem1.jpg" class="img-responsive">
</div>
<div class="modal-footer">
<p class="modaltext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- SECOND MODAL-->
<div class="modal fade" id="modal2" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title boldfont">THIS IS MODAL 2 HEADER</h3>
</div>
<div class="modal-body">
<img src="images/lorem2.jpg" class="img-responsive">
</div>
<div class="modal-footer">
<p class="modaltext">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Now after a modal is opened, to switch the next picture the user has to close the modal and click on another picture. I want the user to be able to click somewhere on the currently open modal and switch to the next modal's content without closing it.
I added the following code into footer but it looks bad since it closes the modal and animates a new one in. I just want the content to change.
<button type="button" class="btn btn-primary" data-dismiss="modal" data-toggle="modal" data-target="#modal2">next</button>
Any help is appreciated, thanks in advance.
Probably not the most elegant, but here's how I've managed to achieve your request plus toggling back and forth.
Add another button to the footer of Modal1
Add another button to the footer of Modal2
Add the following script to your javascript for 3
1
<button class="btn btn-primary" onclick="nextMod()">Go to Modal 2</button>
2
<button class="btn btn-primary" onclick="priorMod()">Return to Modal 1</button>
3
function nextMod() {
$("#modal2").show();
$("#modal1").hide();
}
function priorMod() {
$("#modal1").show();
$("#modal2").hide();
}
Hope this helps
I have a JavaScript with alert box saying some text when an image is uploaded with wrong dimension.I want to show that alert as a Bootstrap alert instead of a popup window?
I have a separate JavaScript file.
In Bootstrap they're not called "pop ups", but instead modals. Its the same general principle (a alert onto the screen for the user to interact with), but just more pretty. See the link below for more information on modals, and the code as well (fully functional). Hope this helps. - Jusitn
Link: http://www.w3schools.com/bootstrap/bootstrap_modal.asp
Edit: Dont forget to add the bootstrap CDN's for it to work (both the CSS and Javascript CDNs) between your head tags
CDN can be found here: http://www.bootstrapcdn.com/
Code:
<!-- 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>