I have looked through various questions on this site and other sites and tried their respective fixes but I haven't got any of them working for me. Whenever I open up my modal, an extra scrollbar is added. The extra scrollbar is of the modal, I know that, what I want to do is to hide the background-page's scrollbar so that it could prevent the background from scrolling. Right now, when the scroll of the modal is finished the background starts to scroll.
This is my modal's code:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<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="myModalTitle">Modal title</h4>
</div>
<div class="modal-body">
<p id="myModalContent"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-thumbs-up"></span>
</button>
<button type="button" class="btn btn-default center"> <span class="glyphicon glyphicon-thumbs-down"></span>
</button>
</div>
</div>
</div>
</div>
Demo.
How could I prevent the background from scrolling?
Just add
body.modal-open {
overflow: hidden!important;
}
to your CSS.
Updated Fiddle
Related
when you click "MAGIC" then a bootstrap popover is shown and there you see the settings icon. If you click that icon a modal window should open, like if you click on the blue button "Launch demo modal". How can I fix that? What is the problem?
Here my code: https://jsfiddle.net/vhsqf65z/
<span data-html='true' data-toggle='popover'
title='<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"><i class="glyphicon glyphicon-cog"></i></button>'
data-content='<b>content</b>'> MAGIC </span>
<!-- 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>
Thanks
Edit:
Added an image showing the popover and settings button.
enter image description here
I modified your code, removed handling inserted.bs.popover event:
https://jsfiddle.net/05nzfcak/
I tested it works (if I understood correctly what you want)
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; }
Hi am try to use bootstrap modal inside of fixed positioned parent element.
But seems like its not working as expected.
Here is an example,
<div class="fixed">
<div>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-target="#myModal" data-toggle="modal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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 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>
</div>
</div>
</div>
https://codepen.io/anon/pen/yMPOpo
Note: I would like to keep my HTML structure as it is.
You just have to lower the z-index of backdrop of modal,
Try this simple CSS and you are good to go
.modal-backdrop{
z-index:-1;
}
What is the issue? it's not clickable?
Trying setting the modal to position:relative and give it a z-index.
See here:
https://codepen.io/anon/pen/wJPWdr
.modal-backdrop.in {
position:relative;
z-index:100;
}
Short answer: Remove fixed class
Codepen: https://codepen.io/anon/pen/dvZXVG
Here, a question with the same issue: z-index not working with fixed positioning
or MDN documentation: The stacking context
my bootstrap modal is appearing blue line at the top and bottom of the modal. I didn't know why the blue line is appearing at the top and bottom of the modal. I want to remove the blue line. I am weak in English please apologize me if I made any grammatical or spelling mistakes.
HTML CODE:
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" 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 class="modal-title" style="text-align:center">Are you sure you want to Delete it?</h4>
</div>
<div class="modal-body">
<div class="form-group" style="text-align:center">
<h6>By clicking on Yes button your ad will be Delete.</h6>
</div>
</div>
<div class="modal-footer" style="text-align:center">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="sayyes">Yes</button>
</div>
</div>
</div>
</div>
CSS CODE:
.vcenter{
position: relative;
top: 50%;
transform: translateY(-50%);
}
IMAGE:
Just add this style style="outline: none !important" to your main div.
<div class="modal fade bs-example-modal-sm vcenter" id="deleteconfirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" style="outline: none !important">
The blue lines will be gone.
Probably you are over ridding some styles,
<div class="container">
<h3>Modal Example</h3>
<div>
Launch Modal
</div>
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Standard Selectpickers</h3>
</div>
<div class="modal-body">
</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>
</div>
<style>
DEMO
im have a profile list page. inside the page it have modal with data-target .popupmessage. the problem is i will using the same class as much as the profile i have. how to make specific when client press the modal? because when i click the button modal to show the modal, all the modal got show up
<div class="col-xs-3">
<div class="profile thumbnail">
<img src="http://placehold.it/450x150">
<button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage">
Message
</button>
<div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fa fa-times" 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>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="profile thumbnail">
<img src="http://placehold.it/450x150">
<button class="btn btn-yellow peopleMessage" data-toggle="modal" data-target=".popUpMessage">
Message
</button>
<div class="modal fade popUpMessage" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span class="fa fa-times" 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>
</div>
</div>
</div>
</div>
</div>
</div>
heres the example
http://www.bootply.com/95vPZK1rN8
i want to add a number at the end of .popUpMessage
so like a looping every .popUpMessage will be like this .popUpMessage1, .popUpMessage2, .popUpMessage3, .popUpMessage. but i kindly stuck.
heres the script
var start=1;
var max=9999;
for(start;start<=max;start++){
//i stuck on the condition
}
As far as I know, Bootstrap doesn't support multiple modals in this way. Every data-target property has to point out to a specific and unique modal. Else (and that's what your problem right now is), Bootstrap will simply show up all of them.
A simple approach could look like this, by just renaming your individual data-target and container class to popUpMessage(x, y, z).
That being said, you've also mentioned you're affraid of having too many classes. In this case, you may use some JavaScript magic and define your classes dynamically after loading up your page.
EDIT:
Since you are using Bootstrap, you can also make use of jQuery and it's .each() function. By doing so, you can iterate through every element (specified through your selector) and change it's attributes like data-target and class.
Take a look into this.