I have a structure as below. Modal1 for displaying my content and Modal2 pops up when a alert modal when deleting.
I have first modal1 loading in Ajax
Second modal is not Ajax call.
Is it advisable to have this structure with multiple modals? Otherwise what is the alternative to get alert message in a modal?
Because right now I am facing weird issues with closing modals and events. It is working some times and some time it doesn't . Not sure what causes the weirdness.
Any leads on do and don'ts will be helpful.
https://plnkr.co/edit/ZaUfPntbVp3QMubaw8xg?p=preview
<button type="button" class="btn btn-info btn-lg" data-toggle="modal"
data-target="#myModal">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>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Alert : Are you sure?</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>
Nested modals are not supported in bootstrap 3 that's why you are getting wired results
From bootstrap docs:
Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
Instead of using a second modal You can use an alert to show notification msg inside the first modal
Related
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/
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
Okay so my problem is that when I do the following:
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<!-- Content will be loaded here from "remote.php" file -->
</div>
</div>
</div>
That prints the playerdetails.php echo but for some reason it removes my bootstrap controls. Can someone tell me why it's doing it and how to fix it? I've already tried getting the default bootstrap modal template and still it shows the playerdetails.php echoes but it removes all my controls for the modal.
Controls I'm looking for is these:
For these controls to function you need to provide the markup for them, bootstrap doesn't add them to modals automatically. If you can modify the output of playerdetails.php, simply add the markup there...e.g.
<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">Modal title</h4>
</div>
However Bootstrap has deprecated the remote option since v3.3.0 and removed it alltogether in Bootstrap 4. Instead they recommend instead using client-side templating or a data binding framework, or calling jQuery.load yourself
If you call jQuery.load yourself you can do something like this:
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<!-- load contents here -->
</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>
define your button
<button class="btn btn-lg btn-primary btn-open-dialog">Launch Demo Modal</button>
and bind a jQuery click event to it to load your player
$('.btn-open-dialog').on('click', function(){
$('#myModal .modal-body').load('playerdetails.php?player=99VY9JR8', function(){
/* load finished, show dialog */
$('#myModal').modal('show')
});
});
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>