How can I show a pop up? It is not displaying first when user clicks the button; I am facing few issues.
1) I want to display a pop up on the bottom (having full width having 50% height bottom of pop up touch bottom of screen).
2) Is there some css transition we can use in my pop up? We show that pop up like animation (moving upward with few seconds).
Fiddle
<button class ="btn" id="bt"> Pop up</button>
<div class ="container" >
<h1 class="title"> Title</h1>
<div class="left"> left</div>
<div class="right">right</div>
<div class="bobyclass">body</div>
<div class="fotter">fotter</div>
</div>
Thanks
You can do that with bootstrap modal here is a FIDDLE example
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
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 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 am trying to apply edit bootstrap build in Modal properties... I want to apply for opacity to only specif div not for whole body(default) how to we fix this?
<div class="container">
<!-- 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 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>
</div>
<div class="change_me" id="changeme1">
some div content
</div>
When click on Open Modal pop up opens by changing the css property of body to opacity:0.6 but i am trying to apply opacity only for class .change_me how can we achieve this?
I think you mean you don't need all body show opacity,just for div.change_me,you can set this :
.modal-backdrop, .modal-backdrop.fade.in {
opacity: 0!important;
filter: alpha(opacity=0)!important;
}
the set you div.change_me:
.change_me{
opacity: 0.6!important;
filter: alpha(opacity=60)!important;
}
then let div.change_me at right place;(edit for wrong number;)
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.
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;
}