Bootstrap modal triggers other modal when clicked on it's body - javascript

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/

Related

Bootstrap Modal HTML

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')
})

Click the close button will close all bootstrap model

For those code, there have a button "Launch modal" to open the Model, then in Model, also have a button "Launch modal2" to open a new model(just call model2) on Model. When I click the close button on model2, all of the Model will de dismiss. How can I fix that?
Please note that I need to put model2 in Model for display data.
Thanks.
http://jsfiddle.net/ve42xs6w/
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
<br>
<br>
<br>
<br>
<br>
<a data-toggle="modal" href="#myModal2" class="btn btn-primary">Launch modal2</a>
<div class="modal" id="myModal2" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Second Modal title</h4>
</div><div class="container"></div>
<div class="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/js/bootstrap.min.js"></script>
The problem is that you are putting the second modal inside of the first modal. Bootstrap just closes all modals that the close button is inside of, so if you nest them the second close button will close all outside modals.
To fix this you can just move the whole div#myModal2 down under the first div#myModal so they are separate elements.
Like this: http://jsfiddle.net/e92o1j3s/3/

bootsrtap modal is not showing up

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

Bootstrap Multiple Modal Buttons

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>

Can twitter bootstrap been set nesting?

I want to make a sub modal in a main modal.
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Main contant
<!-- Button to trigger modal -->
Launch sub demo modal
<!-- Sub Modal -->
<div id="subModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
Sub contant
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
The problem is that when I close the sub modal,the main modal was closed together.
Can I set the close event for every modal on one's own?
You don't need to have each modal nested on the parent modal. To you archive what you need, separe the modals, so each node modal will have it own close data-dissmis attribute, and when triggered it will dissmis only that modal. (And as you need to work with submodals, it will fit your needs, because even with separete html trees, the submodal will be called above the main modal, or the first one)
Heres the fiddle example ( The HTML are a bit desorganized, sory about that ):
http://jsfiddle.net/h3WDq/202/
<div class="container">
<h3>Modal Example</h3>
<!-- Button to trigger modal -->
<div>
Launch Modal
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
Launch Modal
</div>
</div>
<!-- Modal -->
<div id="myModal2" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
<select class="selectpicker" data-container="body">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
<style>
As i said, you going to create two modals separated, and each one will have its own data-dismiss button, and when them get called, they will just close that specific modal, and as you can see in my example they work as submodals.

Categories

Resources