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();
Related
I installed bootstrap with npm and I took the code form bootstrap and paste it on my code but it doesn't work. I'm an hour further but I am not getting it.
this is the code
<template>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" 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>
</div>
</template>
If I click on the button it neither gives an error and nor a popup. Where am I doing wrong?
This is the link of the bootstrap code I copy it. Is the Live demo
I guess that just installing bootstrap is not enough, because you are not using vue-bootstrap, you have to configure the jquery file in order to make it work, here it's a post that explain it step by step
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/
How can I use modal to edit the specific data. For example, when I click the button beside the data, it will get the id of it and a modal will appear with all of the information of that specific data?
Below is an example of modal that i will use but only plain modal without php codes.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-md" 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 title</h4>
</div>
<div class="modal-body">
...
</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>
You better use ajax for this case
The steps for your need are:
1. sent the parameter id with ajax data.
2. select data with the query an return with JSON in file that you mention in ajax url.
3. The last, showing modal with the JSON data that you have made.
This is basic about ajax http://www.w3schools.com/jquery/ajax_ajax.asp
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?
Hey guys I'm using bootstrap modal class for popping up window when a user leaves the page.
And what I need is to pop up the window using javascript not the button.
So it does not work and I'm stuck with it, any help is appreciated
Modal Window
<div class="modal fade" data-toggle="draftModal" data-target="#draftModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<p>You are about to leave the deal. Would you like to save as a draft?</p>
</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>
JS
<script type="text/javascript">
$(document).ready(function(){
window.onbeforeunload(function(event){
event.preventDefault();
$('.modal').modal('show');
});
});
You can not override the onbeforeunload dialog with your own, so unfortunately you better be working with it as it's intended. The dialog will show, but also the once coming with the intended event. Reference: http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx