I have created a bootstrap modal for registration and login.I found that, when modal pops up background does not get shadowed automatically as it should do while i am using bootstrap modal.I am not able to find the cause of this.
I want the background to be a bit darken when modal is opened so that user can focus on modal contents only.I also want modal to position to the center of the screen. So please can anyone tell me how to do this?
following is my modal code ?
<!-- Modal -->
<div class="modal reg_modal " id="regestration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" id="reg_outer_div" data-backdrop="true" >
<div class="modal-content " style="background: white;width:700px;">
<div class="modal-header" id ="reg_modal_header" style="">
<button type="button" class="close reg" id ="reg_close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" align="center" style="color:white;" id="reg_log_modal_header_text"> </h4>
</div><!--/header-->
<div class="modal-body" style="background: white;" id="regmodal_body">
</div><!-- /end modal body-->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Your code seems to work fine.
<a data-toggle="modal" href="#regestration" class="btn btn-primary btn-large">Launch demo modal</a>
<div class="modal reg_modal " id="regestration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-dialog" id="reg_outer_div" data-backdrop="true" >
<div class="modal-content " style="background: white;width:700px;">
<div class="modal-header" id ="reg_modal_header" style="">
<button type="button" class="close reg" id ="reg_close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" align="center" style="color:white;" id="reg_log_modal_header_text"> </h4>
</div><!--/header-->
<div class="modal-body" style="background: white;" id="regmodal_body">
</div><!-- /end modal body-->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
checkout the fiddle http://jsfiddle.net/x79kS/
Check that you have not included jquery dialog.
Refer http://getbootstrap.com/2.3.2/javascript.html#modals for the documentation
Related
I've gone through several examples but for some reason I'm unable to get data from my table to pass to my modal. I could use some expert guidance.
Table row is dynamically populated and looks like this:
<tr data-toggle="modal" data-target="#myModal" style="cursor: pointer" data-id="<?php echo $site_info['site_id']; ?>">
<td><?php echo $site_info['site_id']; ?></td>
...
The modal and JS are below:
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog" style="width:55%;">
<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">Site Information</h4>
</div>
<div class="modal-body">
<div id="siteDetails">asdf</div>
</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 -->
<script>
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(event) {
var getId = $(event.relatedTarget).data('id');
$("#siteDetails").html('Selected: ' + getId);
});
});
</script>
How can I make sure that the #siteDetails div gets updated?
Thanks!
How can I show a bootstrap modal in Meteor?
From http://meteorpedia.com/read/Modals I can read that the Meteor-way is to use template logic to show/hide the modal.
I have tried adding the modal in my template with
<div class="modal fade">
<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>
<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-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
and I have a variable showModal which determines whether the modal should be shown or not. But I don't know how to programmatically show/hide the modal.
Add an id to the modal
<div id="myModal" class="modal fade">
And use modal() to open the modal
$('#myModal').modal('show');
To close the modal
$('#myModal').modal('hide');
Docs
If you want to open the modal in Meteor way
In JS
Session.set('showModal', true); // Show modal
Session.set('showModal', false); // Hide modal
In Template
{{#if showModal}}
<div class="modal fade"> <!-- Use Display block to show the modal by default -->
...
{{/if}}
Make life easy on yourself and use a bootstrap meteor-modal package. I use this one and it works great meteor modal.
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'm using Twitter Bootstrap modal to display post details on wordpress. But I have an issue with the modal. The whole screen is grey, I can see the modal but nothing is clickable. I can exit this mode by hitting "esc" key. I think it's a js issue, but can't figure out. I have jquery, bootstrap.js and bootstrap.css loaded.
<a href="#" data-toggle="modal" data-target="#myModal-39">
<div class="col-lg-4 imgWrap">
<img width="500" height="332" src="img/myimage.jpg" class="attachment-post-thumbnail wp-post-image" alt="myimage" /> <h2><span>Title 39</span></h2>
<p class="imgDescription">Description 39</p>
</div><!-- /.col-lg-4 -->
</a>
<!-- Modal -->
<div class="modal fade" id="myModal-39" tabindex="-1" role="dialog" aria-labelledby="myModalLabel-39" 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-39">Title 39</h4>
</div>
<div class="modal-body">
<img width="500" height="332" src="img/myimage.jpg" class="attachment-post-thumbnail wp-post-image" alt="marrakech" /> </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Fiddle: http://jsfiddle.net/8E8En/
Did I miss something?
Thanks,
Seem like there is some elements have z-index higher then your modal.
Try to inspect your website using firebug or chrome developer tools to figure it out
Or try this style:
.modal {
z-index: 10000
}
You can read more about z-index from MDN docs
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");
});