I am currently developing a website and I am having some issues with a modal.
So this is what I have so far:
HTML:
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="exampleModalLabel">Resultados</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>A tua média final de secundário é: </h4>
<br>
<br>
<br>
<h6>A tua média de acesso ao Ensino Superior é: </h6>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" style="background: #4a58ce; outline: none;">Ok</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" id="clicktoshow">
Launch demo modal
</button>
JS:
var buttonc = document.querySelector("#clicktoshow");
buttonc.addEventListener("click", triggermodal);
$(document).ready(function triggermodal() {
$("#exampleModal").modal();
});
Right now when I use javascript to trigger this modal after clicking the button nothing happens.
I have tried multiple solutions and still can't figure it out.
Note: I am bit new to web developing
You can open the modal by adding a click event listener using jQuery. Once the button #clicktoshow is clicked, the #exampleModal will be shown. The code is-
$('#clicktoshow').on('click', function(){
$('#exampleModal').modal('show')
})
Related
I am trying to implement a code to open a bootstrap modal after clicking on a button. but for a reason the modal is not showing up. here is my code
<button type="button" id="asd" data-toggle="modal" data-target="#exampleModalCenter" class="btn btn-success btn-lg btn-block"><b> לתשלום <i class="fas fa-credit-card"></i></b></button>
<!-- Modal -->
<div class="modal fade rtl text-left" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">אישור הזמנה</h5>
</div>
<div class="modal-body">
<div class="container">
<p class="text-center text-muted">הזמנה בס"כ:
₪<script>
document.write(<?php cart_total(); ?>);
</script>
</p>
</div>
<button id="paySubmission" type="submit" name="checkout" class="btn btn-success btn-lg btn-block" ><b> מאשר הזמנה </b></button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">סגור</button>
</div>
</div>
</div>
</div>
I don't know why the modal is not showing up after the click... someone can help?
It seems that for some reason the loader.php file was not loaded properly. and in that file all bootstrap .js files were loaded from.
So I fixed the problem which prevented loader.php file to load, and the problem has been fixed.
Thank you
I am using NGX Bootstrap modal in my project. Inside the modal i have a form, right now if I press Esc key the modal is hiding.
How can I be able to show child modal(confirm modal) if any user is filling up the form and suddenly press the esc key or tries to close the parent modal.
Is there any way to show the child modal without closing the parent modal based on some condition if anyone presses the esc key.
<button type="button" class="btn btn-primary" (click)="parentModal.show()">Open parent modal</button>
<!-- parent modal -->
<div class="modal fade" bsModal #parentModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name1" class="modal-title pull-left">First modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-control">
<input type="text" placeholder="email" />
</div>
<div class="form-control">
<input type="text" placeholder="password" />
</div>
<button type="submit" class="btn-primary"></button>
</form>
</div>
</div>
</div>
</div>
<!-- confirmation modal -->
<div class="modal fade" bsModal #childModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="dialog-nested-name2" class="modal-title pull-left">Second modal</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you want to exit? Your changes will not be saved.<br>
<button class="btn-danger">Discard</button>
<button class="btn-primary">continue</button>
</div>
</div>
</div>
</div>
Assuming you are using ng-bootstrap.
While using modal.open method you can pass keyboard attribute as false.
Its official doc can be found at :-
https://ng-bootstrap.github.io/#/components/modal/api
Eg:- this.ngbModal.open(content, {keyboard: false});
I've got this project, a counter for a game... The idea is that when I click the "#buttonplay", it runs the jQuery function and hides the modal. That is all right, but after the modal is hidden, the function DisplayMoreInfo doesn't work... That function has to, when the user clicks on a specific game, provide more info about it.
I've got a game done without the function that runs after the #buttonplay is clicked, and it shows the info before I create a new game... But after, doesn't do anything...
This is my HTML:
<div id="contentplays" style="display: none">
<button type="button" id="buttonplay" data-toggle="modal" data-target="#myModal">
New Game
</button> <!--This button is to create a new play-->
<!-- Modal -->
<div class="modal fade" id="myModal" 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">New Game</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<!--Here it goes the info of the new game-->
</form>
</p>
<br>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="submitnew" class="btn btn-success">Save changes</button>
</div>
</div>
</div>
</div>
<!--This is the game WITHOUT the jQuery function of the #buttonplay-->
<div class="game done" onclick="DisplayMoreInfo(NewGame);">
<h1>NewGame</h1><br>
<p class="info">21/01/2017</p><br><br>
</div>
<div class="moreinfodone" id="NewGame" style="display: none">
<p class="person">Player 1: Pirulo</p>
<p class="person">Player 2: Zultano</p>
<p class="person">Player 3: Mengano</p>
</div>
</div>
And this is my JavaScript:
//The jQuery function
$('#submitnew').click(function () {
$('myModal').modal('hide');
//Some code here
});
//The function that does't work after the .modal('hide')
function DisplayMoreInfo(game) {
$(game).toggle();
}
Thanks in advance for any answer!!!
You might have to change this line of code from
onclick='DisplayMoreInfo(NewGame)';
To:
onclick='DisplayMoreInfo("#NewGame")';
Why did not work?
You are trying to pass NewGame to the DisplayMoreInfo function, which is at that point undefined.
Next time try to debug your code better using Chrome!
I have four grids, and in each grid I have a button that I would like to have its own unique modal. Whenever I try using Bootstrap's modals' however, I am only getting the first button's data to show up, even though I may be clicking on a different button that should display a different modal.
I'm using modals for the first time, so I'm going directly based off the examples in Bootstrap's website. I have the following code being replicated four times with the only difference being the name of the button, the modal title, and the modal body. Can anyone tell me what I need to change in order to have four unique modals in the same page?
<div class="col-md-3">
<div class="head">
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Button1</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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">First Log</h4>
</div>
<div class="modal-body">
Test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="mediumSpacer"></div>
</div>
Each modal should have a different id, the data-target for each button should be the id of each modal.
Example:
<div id="myModal1"class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">....</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div>
<div id="myModal2"class="modal fade" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">....</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div>
Each button should be something like:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">Button1</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">Button1</button>
I am experiencing a problem with one of the three modals running on one page. When it's visible and you click it's body it opens the other one behind it.
This is the opened one:
<span class="help-block">#Html.Raw(ptype.Description.StripHtml())</span>
<div id="klarnaModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-contents">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="klarnaModalLabel">#Html.Raw(ptype.Description)</h3>
</div>
<div class="modal-body">
<iframe src="https://cdn.klarna.com/1.0/shared/content/legal/terms/24637/sv_se/invoice?fee=0"></iframe>
</div>
</div>
</div>
</div>
And the one that opens by clicking the other body:
<input type="radio" name="paymenttype" id="#ptype.Id" value="#ptype.Id" data-toggle="modal" data-target="#klarnaSubmitModal" data-remote="true" />
<div id="klarnaSubmitModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="klarnaSubmitModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-contents">
<div class="modal-header">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="klarnaSubmitModalLabel"><i class="icon icon-info-sign"></i>Vigtigt</h3>
</div>
<div class="modal-body">
Det er ikke muligt at benytte alternativ leveringsadresse sammen med Klarna Faktura.<br /><br />
Vælger du at fortsætte vil din ordre blive leveret til faktureringsadressen.<br /><br />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-medium btn-primary" id="acceptklarna-btn">
<i class="icon icon-ok-sign"></i><b><span>Fortsæt</span></b>
</button>
<button type="button" class="btn btn-medium btn-primary" id="resetpayment-btn">
<i class="icon icon-circle-arrow-down"></i><span>Vælg en anden betalingsmetode</span>
</button>
</div>
</div>
</div>
</div>
EDIT! This reproduces my problem: http://jsfiddle.net/mPWw4/3/
Why is the two connected so that a click on the first ones body opens the other?
Move your modals outside of your main html. I would recommend somewhere close to the to the end of your </body> tag.
Also just as a side note some of your markup on the modals e.g. <div class="modal-dialog"> and <div class="modal-content"> is for Bootstrap 3.0 since your using bootstrap 2.3.2 you don't really need it.
I updated your fiddle by moving the modals out of the main html and it works as expected.
http://jsfiddle.net/mPWw4/4/