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");
});
Related
I'm trying to get a modal to show on my bootstrap site, and when I click the button to trigger it the screen turns dark, but nothing shows up.
<!-- 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>
This is the javascript I'm using as well, in addition to JQuery, popper.js, bootstrap js
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').trigger('focus')
})
I literally took this right off the bootstrap site and for some reason it's not working.
$('#myModal').on('shown.bs.modal', function() {
$('#myInput').trigger('focus')
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<!-- 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>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
The code snippet for the modal is perfectly fine, Check the parent div for both trigger and the modal and raise their z-index, It very likely that the Z-Index of the parent element is interfering with the modal pop up. You can try this`
.parentElementOfModal{
z-index:10000;
}
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 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');
});
I would like to know how to create a custom dialog box that rises when button gets clicked n that box should be beside the the button...please help me out brothers
You can use Bootstrap model
http://getbootstrap.com/javascript/#modals
<!-- 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>
My bootstrap modal is working when using data-toggle="modal" data-target="chart" But when I open a modal using javascript .modal() it turns the page into all white.
HTML:
<div id="myModal">
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
JAVASCRIPT:
var base = $('#myModal');
base.modal();
//i even tried base.modal("show")
Your id attribute myModal has to be placed into your <div class="modal"> element.
The following code could work :
<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">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Modal title</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>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<script type="text/javascript">
$('#myModal').modal('show');
</script>