I am working with boostrap latest version finally getting the hang of it and try to add another modal combined with the one i already have. Well no luck and got stuck. is there a way to add another modal that works together with the previous modal?
the reason why i wanted to try to get another modal in there to show off the twitch emotes plus commands they can use to make it easier for the user.
in other words another box on the right side (where its marked with a red box)
Screenshot: http://i.stack.imgur.com/bJduj.png
This is possible with setting a data-target for the same class instead of using href with an ID. You'll have to adjust the position of them depending on where you want to two and how big they are etc.
Open up the example to full-page and you'll see.
data-target=".myModals"
#myModal2 {
top: 40%;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<a data-toggle="modal" data-target=".myModals" class="btn btn-primary btn-lg">Launch Modals</a>
<div class="modal fade myModals" id="myModal1" 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-hidden="true">×</button>
<h4 class="modal-title">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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal -->
<div class="modal fade myModals" id="myModal2" 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-hidden="true">×</button>
<h4 class="modal-title">Modal title 2</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>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
You can open a modal via JavaScript. Since you already have jQuery loaded, try something like this.
Assuming you have a modals with IDs of videoFeed and textFeed.
$( "#" ).bind( "click", function() {
$('#videoFeed').modal('toggle');
$('#textFeed').modal('toggle');
});
Related
I have an Angular App and a custom Modal Dialog implementation. How can I limit the 'tabbablity' of the page so that i can just tab through the Modal, and not everything else in background?
I have set aria-hidden="true" for all other elements directly under the body tag, and thought that has to handle that, but no success. tabindex="-1" also did not work..
Actually I want the exact tab-behaviour of this bootstrap modal:
https://getbootstrap.com/docs/4.0/components/modal/
Click: "launch demo modal" and tab through the modal elements..
How can I achieve this?
Edit: I look at the bootstrap modal, and they do not set anything to other elements, but just to the modal container div (with class="modal fade show") tabindex="-1". And after the last element in modal, tab sets focus to this modal container div. After that the focus is set again to the first modal element. In my case tabindex="-1" strangely does not bring anything, after the last element focus jumps to the Browser's URL Input field and goes on.
I dont know what code you have...but this tabindex behavior works well with bootstarp example.
.modal-backdrop {
background-color: transparent !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal (with tab only on modal elements)
</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">
coucou
</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>
<br><br><br>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Launch demo modal (with tab on all document elements)
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal2" 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">
coucou
</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>
The bootstrap editor is working good, but I want to display the entered data into a div with the id: enclousere. It works fine but the data should display like this:
Enclouser:first enclousersecond enclouser3rd enclouser
But it displays like:
Enclouser:<div><ol><li>first enclouser</li><li>second enclouser</li><li>3rd enclouser</li></ol></div>
My model:
<div class="modal fade" id="myModale" 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add Enclosure</h4>
</div>
<div class="modal-body sol">
<textarea id="textareaIDe" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="savedatae" data-dismiss="modal" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
MY JQuery:
$('#myModala').on('shown.bs.modal', function () {
$('#textareaIDe').focus();
})
$("#savedatae").click(function(){
var message = $('.sol .Editor-editor').html();
alert(message);
$('#enclousere').text(message);
//alert(message);
});
Tag used to display:
<div class="fsize" id="enclousere"></div>
Use
.html(message);
Instead of
.text(message);
I am launching a modal off a modal and it isn't appearing over the first modal. My modals have events called when they are launched:
$("#noteModal").on("show.bs.modal", function (e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
$("#notesModal").on("show.bs.modal", function (e) {
var link = $(e.relatedTarget);
$(this).find(".modal-body").load(link.attr("href"));
});
The modal fires fine but doesn't appear over the first modal. If i click anywhere on screen the second modal acts as if it disappears then the first modal is still shown.
I've tried doing hide / show on the first and second modal but that doesn't seem to work.
You could just use the hidden.bs.modal event on the first modal to show your second modal, while the button inside the first modal will hide the first modal on click.
Sounds stupid, i know, but here is an example.
This will not stack the modal windows on top of each other though.
If you want them to stack i would say you go with what Steve suggested in the comment.
And just for the record:
Modals modal.js
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.
var $firstModal = $('#first-modal'),
$secondModal = $('#second-modal'),
$innerModalBtn = $firstModal.find('.btn-block');
$firstModal.on('hidden.bs.modal', function (e) {
$secondModal.modal('show');
})
$innerModalBtn.on('click', function() {
$firstModal.modal('hide');
})
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-8 col-md-offset-2">
<button type="button" type="button" class="btn btn-default btn-lg btn-block" data-toggle="modal" data-target="#first-modal">Open Modal</button>
</div>
</div>
</div>
<div id="first-modal" class="modal fade" tabindex="-1" role="dialog">
<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">First Modal</h4>
</div>
<div class="modal-body">
<button type="button" type="button" class="btn btn-default btn-lg btn-block">Open Second Modal</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div id="second-modal" class="modal fade" tabindex="-1" role="dialog">
<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">Second Modal</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I'm really new to bootstrap and I am trying to add a popup using Modals. I added the code and the scripts, but when you click on the button its not popping up. I can tell something is coming up because the background fades a little but a popup is not coming up. So I need a little bit of help figuring out why its not popping up.
My JavaScript links:
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
Code for Modals:
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
This is a compatibility issue v2.X vs v3.X
Bootstrap 3.0 New Classes & Elements
Modal markup has changed .modal-header .modal-body .modal-footer now get wrapped in .modal-content and .modal-dialog
Modal Migration
How to convert from a 2.x to 3.0 modal:
remove .hide from the .modal (it's now hidden by default)
wrap .modal-header .modal-body .modal-footer inside .modal-content
wrap .modal-content inside .modal-dialog
Events are namespaced. For example to handle the modal 'show' event, use 'show.bs.modal'.
Reference
Bootstrap 3 modal example:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal fade" 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="modal-body">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
JSFiddle
What I usually do for modals with just JavaScript and Bootstrap is to have an onClick event on the button that executes a JavaScript method that displays the modal.
In your HTML:
<button onclick="myFunction()">Click me</button>
<script>
function myFunction(){
$('#myModal').modal('show')
}
</script>
Just change the function name myFunction to the name you want and myModal to the id of your modal.
Here is the bootstrap docs, where the modal stuff is located, for future reference getbootstrap.com/javascript/
Complete Example using CDN. SO that you can download the latest version from Url
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/JavaScript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<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">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>
</body>
</html>
I am new to bootstrap. I have a situation where I have to Show a Bootstrap Modal, When I click any button on that Modal I'll have to show another modal below that 1st Modal (Not Stackable). If I close the 1st Modal 2nd Modal has to go up to replace the position of 1st Modal.
Is it possible ?
Any help ?
You can listen to the "close" event of the first model to open the second model:
Bind a function to Twitter Bootstrap Modal Close
$('#my-modal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
})
Manually open the second model:
$('#otherModel').modal('toggle')
An example:
Your HTML code:
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- Modal -->
<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-hidden="true">×</button>
<h4 class="modal-title">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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="myModal2" 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-hidden="true">×</button>
<h4 class="modal-title">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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Javascript:
$('#myModal').on('hidden.bs.modal', function() {
$('#myModal2').modal("toggle");
});