I have a bootstrap modal set up but I populate it with data retrieved via the jQuery ajax function. If the modal is opened using the following code, then it opens fine, and is scrollable.
<button type="button" class="btn btn-warning btn-xs" data-toggle="modal" data-target="#editContact"><i class="fa fa-pencil"></i></button>
However, as I populate it with data, I call a JavaScript function to do the ajax call, and populate it with the data. The function is called on button click, like so:
<button type="button" class="btn btn-warning btn-xs" onclick="open_contact(2);"><i class="fa fa-pencil"></i></button>
Which calls the follow JavaScript function:
function open_contact(id)
{
$.post("contacts/get",
{
// Posts relevant details to show the right content
},
function(data, status) {
// Code here to check for valid response etc
$('#editContact').modal('show');
});
}
This JavaScript works fine - it throws no error and it retrieves the data fine. It also opens the modal fine. However, when the modal is opened with the JavaScript rather than with the first button (with the data-target), the whole browser window scrolls rather than just the modal.
For reference, the modal opening tags:
<div class="modal fade" id="editContact" tabindex="-1" role="dialog" aria-labelledby="editContact" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
Does anyone have any suggestions please?
Edit
I should just clarify that my issue isn't the fact that I don't have scroll bars. The issue I'm having is when I scroll using the mouse wheel for example, the page behind the modal will scroll, but the modal doesn't move. Therefore, any text hidden from view in the modal, never comes into view.
I think the comments to your question are right, not showing the scrollbar is the intended behaviour.
Class modal-open gets added to the HTML body when you show the modal, and removed when you hide it.
This makes the scrollbar disappear since the bootstrap css says
.modal-open {
overflow: hidden;
}
To achieve what you want - showing the scrollbar - you can override the native css by specifying
.modal-open {
overflow: scroll;
}
in your own css file.
Related
I'm trying to make a bootstrap modal for my page. But whenever I try to close that modal, that modal will resize my entire page.
here is the gif that I took from my page :
https://ibb.co/iN5Bep
also, I use this: http://www.java2s.com/Tutorials/HTML_CSS/Bootstrap_Example/Dialog/Launch_a_modal_dialog_from_a_link_button.htm as my modal
I'm quite new with javascript and bootstrap, and I'm not really sure what to do to fix this. please help
Edit :
i use :
+Add Data
to open :
<div class="bs-example">
<div id="myModal1" class="modal fade">
<div class="modal-dialog" style="width:70%!important;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 class="modal-title">Add Credentials Data</h4>
</div>
<div class="modal-body">
//contenthere
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
to close it i use :
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
or
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
The problem you are facing is: your initial page, without the modal opened, fits in the browser. There is no need of scroll bar. But then you open the modal, and this modal doesn´t fit in the browser, and the scroll bar shows up taking some space. When you close the modal, the scroll bar disappears and everything is back to normal.
You can create a modal that always fits in the window, and allow a scroll bar inside the modal if it's too big.
Or you can save space in case the scroll bar shows up, so your elements page don't get moved around.
You can look for a smaller custom scroll bar
It dependes on requirements and tastes ;)
i solved it by making the body tag position fixed and adding a new div below it.
all thanks to #Ryan Brackett answer from :
Fixed position div scrollable post
Sorry for resuming this old question, but I had the same problem on a legacy project and didn't find the solutions fit my requirements.
The problem is that Bootstrap adds a padding-right: 17px; inline style to the <body> when the modal is shown, to make up for the disappearing scrollbar in browsers where said scrollbar takes up actual space in the viewport (e.g. in all browsers on Windows, for example). But for some reason Bootstrap doesn't seem to take away that padding when the modal is hidden.
I solved this via JavaScript by simply resetting the style property on the modal hidden event:
$("#myModal1").on("hidden.bs.modal", function () {
$('body').css('padding-right', 0);
});
Might not be the cleanest of solutions but it did the job for me, without having to rethink the entire DOM.
I also think this might have been a problem with a particular Bootstrap release, so maybe it cloud have been solved in future updates. But in my case I didn't have time to update the version due to budget constraints.
Hope this helps someone!
The default bootstrap modal adds a full page element that when clicking closes it. With data-backdrop="static" data-keyboard="false" you can disable this functionality and so that clicks outside the modal and the esc key do nothing.
I'd like to use a bootstrap modal that allows me to click, select and perform all the normal functions on the page without dismissing it. The only way to dismiss it would be to click buttons on the modal (x or cancel for example).
How can I use a bootstrap modal like that?
<!-- Example modal **without** the functionality I want -->
<div id="myModal" class="modal fade" data-backdrop="static" data-keyboard="false">
<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">Settings</h4>
</div>
<div class="modal-body">
<p>Settings</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="loadpage" type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
There were three steps I took to achieve the desired effect. My modal is prepended to the body, the steps may differ if yours is not.
Bootstrap appends a div element to the body (body > .modal-backdrop). It has the styles that cause the white "overlay" effect. This whole element can be deleted or the styles overridden.
A class is added to the body, modal-open. This has the css overflow: hidden;. Either remove that class, or override the css.
The actual modal will also need some css added. width or max-width worked for me. (makes scrolling of the modal work)
#myModal {max-width: 300px;}
Don't make those changes for every modal, use a trigger to restrict them to a specific one.
$("#myModal").on("show.bs.modal shown.bs.modal", function(e) {
// Remove overlay and enable scrolling of body
$("body").removeClass("modal-open").find(".modal-backdrop").remove();
});
The above causes some "flashing" with the removal of .modal-backdrop. If that is unwanted, overriding the styles with css or preventing the default bootstrap action may be best.
I saw no solution for what you ask and I needed to have this feature, I did a function to do that.
It's working with jquery ui draggable element but you can move out any code related to that and it should work as well.
https://jsfiddle.net/wyf3zxek/
modalDraggableClickOutside('#modal-example', 'iframeLoaded', 'Modal shown');
Note that it's not working very well in an iframe (such as js fiddle) : in an iframe you need to move the modale once
There are other similar questions here, but they all mention to change this:
.modal-backdrop {
display: none;
}
To enable using the rest of the page while modal is open, except my modal doesn't have this .modal-backdrop, I don't know if it's something new with Bootstrap 4, but this solution did not work.
My modal :
<div class="modal" data-keyboard="false" data-backdrop="false" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary text-white" id="header" style="cursor: move">
Search
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="forms">
</form>
<hr>
<div class="container" id="table">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary">Export</button>
</div>
</div>
</div>
</div>
The idea here is to just have a dialog window that is draggable (I'm using jquery UI), is modal the correct component? Or cards? I used modal as they already position on the center and you don't need javascript to set up the close button.
Also open to suggestions of external libraries that implement a panel-like module and integrates will with Bootstrap.
And is there a way to make the background enabled without messing Bootstrap files too much?
I'm focusing on the .modal-backdrop here, as I assume you already solved the draggable part by using jQuery UI.
When it is used, .modal-backdrop actually is a fixed positioned div element covering the entire viewport and inserted before the </body> tag when the modal dialog is shown. By default this provides the shaded background behind the modal, and also listens to click events to close the modal if needed.
By using data-backdrop="false" this element is not inserted into the DOM, so visually it will seem that there is nothing behind the modal. However, the .modal tag is also an element covering all the viewport (above the page, in the foreground), and acts as a wrapper for the actual .modal-dialog tag.
So, in your scenario it is actually the .modal that is blocking (or catching) user interactions from the rest of your page.
You can overcome that with the help of the pointer-events css property like so:
.modal {
pointer-events: none;
}
The .modal-dialog will still receive interactions and will work as expected, but the page in the background will be clickable too.
I am using a modal that I used from a previous site where it works fine. Difference is this modal will only appear in IE9 only to direct users to a better browser. I was able to test it with just a alert and works fine.
However, for some reason, when I transfer the code I did for a previous site to this new site, the Modal isn't responding and to one point is not showing on the site.
When I try close the "Close" button, it will just refresh the page. I am not sure why and when I close the "X" button, it does not work either.
The code is inserted in a coldfusion file and I am not sure if it causing conflict or not.
Any help would be appreciated.
Here is what I did for the modal. ie-only detects whether it is IE9 or not:
<!---<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:##428bca">
<button type="button" class="close" data-miss="modal">x</button>
<h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>
</div><!---Modal-Header Div--->
<div class="modal-body">
<p style="text-align:center">You are using an outdated browser.<br /> <br /> Upgrade your browser today to better experience this site.</p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container--> --->
<!---<script>
$(function(){
$('##myModal').modal('show');
}
</script>
<div class="modal-backdrop fade in"></div>--->
It looks like there is a syntax problem in your code:
$(function(){
$('##myModal').modal('show');
}
This is incorrect; it should be:
$(function(){
$('#myModal').modal('show');
});
When corrected the Modal loads as a Modal, which in turn causes the Close button to operate as expected. Absent this the modal still loads (because you have in activated) but loads absent the overlay and absent the hook to Bootstrap's Modal JS which explains why your close button is non-functional.
You can see a functional example here: http://www.bootply.com/24IPYP8O3F
Why your code isn't working
The in class on your Modal div instructs Bootstrap to make that modal visible, and position it according to the Bootstrap CSS. Your jQuery is wrong though, so Bootstrap treats this like a bit of HTML that is just part of the document.
Once you correct your jQuery Bootstrap processes it as expected; as a Modal Javascript component. Once that happens it is presented with the overlay (as default) and the data-dismiss attributes are processed correctly.
The short of it is that the entire issue for why your Modal is not behaving like a Modal is that your jQuery is wrong.
I made a bootstrap modal - it's working fine. But when I want to use a modal somewhere else in my site it overwrites the other modal.
Which part of the code do I need to change? And do I have to add like thousands of extra code to javascript for each modal, or can I make a group code?
Thanks!
I added this:
$('#clickme').click(function(e) {
$('#showModal').modal('show');
<script>
function showModal(){
$("#showModal").modal("show");
}
</script>
and:
<div class="modal fade" id="showModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign me up!</h4>
</div>
</div>
</div>
</div>
Don't try to do this. Bootstrap's modal is not designed to support that. Its own documentation says
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
It should have said "a lot of custom code". For instance, BS modals use a class on the body element, that is removed when it closed. Therefore, closing a second modal will also hide the first. Then you need special code to detect that a modal was previously open and restore the class on the body. It's much more trouble than it's worth.
Instead, use a "poor man's modal" for the second modal, just an absolutely positioned div you pop up somewhere. You don't need the overlay covering the screen anyway since it's already there from the first modal.