I'm trying to use bootstrap material and my problem is that dialog get colsed immediately after I click inside it. I'd like to be able to close it but only on close button or clicking outside. But not indiside!
<div class="container-fluid">
<section id="landing">
<button id="video-button" class="btn btn-success btn-raised" data-toggle="modal" data-target="#video-dialog">
Quick tour
</button>
</section>
<section id="about">
</section>
<!-- video dialog -->
<div id="video-dialog" class="modal fade" tabindex="-1">
<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">Dialog</h4>
</div>
<div class="modal-body">
<p>body. when I click here the dialog get closed.</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
</div>
UPDATE
The problem is in div.modal-backdrop because it's before the modal's content and actually covers my dialog.
Related
My code like this :
<div class="container">
<h1 class="display-4 text-center mb-4">Bootstrap Modals</h1>
<div class="row mb-4">
<div class="col text-center">
<h3>The Basic Modal</h3>
<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal" data-backdrop="false" data-keyboard="true" >Click to open Modal</a>
</div>
</div>
</div>
<br/><br/><br/><br/>
<div class="form-group">
<label for="exampleFormControlTextarea1">Input data</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"> </textarea>
</div>
<!-- basic modal -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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>
Demo and full code like this : https://codepen.io/trendingnews/pen/BayQLrm?editors=1010
I set data-backdrop="false" to remove backdrop
but it makes me unable to click on something. I have to click the close button on the modal to close on the modal.
how do I make it when I click on any element outside of modal, the modal automatically closed?
for example, I click textarea or other elements, the modal is automatically closed
As an extension to my comment, adding as an answer for anyone else that comes across this.
Problem:
You want to use a bootstrap modal, with no backdrop, and have the functionality that clicking away from the modal closes it.
Challenge:
The bootstrap modal backdrop has a listener on it so when clicked, it closes the modal. However, if there's no backdrop, then this cannot happen.
Solution:
Use a backdrop as normal but set it's color to transparent. Set the css background-color property on the backdrop e.g.
.modal-backdrop { background-color: transparent; }
I have a icon of plus + sign which is supposed to open a modal form on click
but here modal form is not opening.
<td>
<a data-target="#myModal" data-toggle="modal" href="#myModal">
<span class="glyphicon glyphicon-plus"></span></a>
</p>
</td>
Above code represent + sign and click on it.
Model Form code is below:
<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>
What's wrong with it. I am unable to find it. Any help would be appreciated
The bootstrap.js library needs to be included in order for data-toggle to work.
I'm using a Bootstrap Modal and the modal-footer div is displayed with the grey background used to block out the main page instead of the white background used by the rest of the modal.
It's a somewhat complicated set up but I'll do my best to explain it.
The modal definition looks like this:
<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<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 id="concert-modal-title" class="modal-title"></h4>
</div>
<div id="concert-modal-body" class="modal-body">
</div>
</div>
<div class="modal-footer">
<span id="ConcertMessage" class="pull-left"></span>
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
<button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
</div>
</div>
You'll see that the modal-body section is empty. That's because I have javascript that uses the Mustache.js templating system to set the html of the body using a template and the return from an Ajax call. That all works correctly and the modal body is displayed correctly.
The modal body consist of a Bootstrap tab control and a form that contains all the tab panes, so the overall structure looks like this.
<ul class="nav nav-tabs nav-justified nav-justify">
<li class="active">Basic </li>
<li>Media </li>
<li>Tickets </li>
</ul>
<form id="concert-form" action="#" class="form-horizontal">
<div class="hidden">
<input type="text" name="Mode" id="Mode">
<input type="text" name="ConcertID" value="{{ConcertID}}">
</div>
<div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
<div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
</form>
I've used an html syntax checker to make sure I don't have any unclosed tags. I've also tried placing the form tag in several different places in the code but no matter what I do, the modal-footer section does not display correctly.
Any ideas?
You have your footer outside the modal-content div.
Structure should go:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
You have it as this (your missing a div in the html you posted btw):
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
</div>
<div class="modal-footer"></div>
</div>
</div> <!--missing div in the example you posted here-->
Functioning code below so you can see the correct structure in action:
$(document).ready(function(){
$('#concert-modal').modal('show');
});
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<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 id="concert-modal-title" class="modal-title">Mark it Pete</h4>
</div>
<div id="concert-modal-body" class="modal-body">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ec/f3/fe/ecf3fedfa44312bb0fe6bcb953c8718f.gif" style="max-height: 50px;"/>
</div>
<div class="modal-footer">
<span id="ConcertMessage" class="pull-left"></span>
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
<button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
</div>
</div>
</div>
</div>
I am trying to open a bootstrap calendar in a modal(popup) window. by default it append on body. is there is any way to append that calendar on a div.
Actually when scroll the page the calendar goes out away through to the popup window.
I hope this helps. Add content in modal-body.
<a href="#" data-toggle="modal" data-target="#createapp">
ABC</a>
<div class="modal fade" id="createapp" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body" id="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I have the modal window (bootstrap 3):
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
</div>
</div>
</div>
By clicking on "NEXT" button, #modal1 is closing and #modal2 is opening:
<div class="modal fade" id="modal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT //lots of text
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="EXIT" data-dismiss="modal"/></form>
</div>
</div>
</div>
Scrolling is working fine in the first modal window #modal1, but in the #modal2 it is not working, there is not even the scrollbar.
So, the question is: How to make the scrolling work in the second window?
UPD: added jsfiddle: http://jsfiddle.net/386ozdb7/2/
If you indent your code correctly you can see that div with class "modal-footer" are not inside the div with "modal-content" as the documentation suggest. Maybe that can be the problem of scrollbar with a lot of text
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT
</div>
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
</div>
</div>
Try to change your 2 modals as below:
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
TITLE
</div>
<div class="modal-body">
TEXT
</div>
<div class="modal-footer">
<form><input class="btn btn-success" type="button" value="NEXT" data-toggle="modal" data-dismiss="modal" data-target="#modal2"/></form>
</div>
</div>
</div>
</div>
check the bootstrap example at: http://getbootstrap.com/javascript/#modals
ps: always indent your code.. it's useful to reduce markup error!
Thats the problem: http://getbootstrap.com/javascript/#overlapping-modals-not-supported
Overlapping 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.
This may help you: https://github.com/jschr/bootstrap-modal
Solution:
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}