How does Bootstrap darken the page background behind a modal - javascript

I can't seem to figure out what Bootstrap is doing to darken the background of a page when a modal is shown. I see that a class is added to the body tag (modal-open) but that doesn't seem to affect the background.
https://getbootstrap.com/docs/4.0/components/modal/

I used a diff tool to see the difference between the modal open and the modal closed html and found the answer. When the modal is shown, Bootstrap inserts an empty div just above the closing body tag:
<div class="modal-backdrop fade show"></div>
When the modal is closed, the div is removed. The .modal-backdrop.show class has an opacity value of 0.5.
So that's how it's done!

Related

bootstrap modal shows previously resized textarea as it is

I am using a bootstrap modal to get some information from user. Inside the modal-content class I have given a <textarea /> field to let user provide comment. This textarea is and should remain resizable. But the problem is when the user resizes the text area and closes the modal, the textarea shows previously changed size and it does not reset to original.
Please follow the link below to reproduce the issue:
Open Modal, Resize the textarea so that it will stretch even outside the modal
Now click on close
Open the modal again, the previously changed size of textarea will be shown.
Note that CSS resize: none; is not the option I DO want the textarea should be re-sizable.
Also, I have jquery available, Is there option with jquery to reset the size when the modal closes automatically?
Edit: The duplicate suggestion is different as the textarea here comes within a bootstrap modal.
Demo
When the modal is closed (hidden.bs.modal event) reset the textarea height and width.
$('#myModal').on('hidden.bs.modal', function() {
$(this).find('textarea').css({'width': '', 'height': ''});
})
JSFiddle

Change background of the modal before the delay

I use this material modal pop-up ( http://codepen.io/ettrics/pen/Jdjdzp/ ) on my website, it works perfectly fine but I need one modification. As you can see in the snippet, once the button is clicked there is a delay of 400ms and after that modal content shows up. The background of the modal content also changes after the defined delay of 400ms. What I want is that background color should change immediately once the button is clicked and the modal content should load normally after 400ms.
&__bg class controls the background of the modal. It's set to transparent in the snippet. Kindly suppose it to be any solid color like black.
I don't have any experience in JAVA SCRIPT.
A LITTLE HELP WOULD BE APPRECIATED.
here is a modified pen of the changes you want.
The thing is you want to show the modal instantly but hide the content for a while
window.setTimeout(function(){
// reveal the modal content
content.classList.add('modal__content--active');
},contentDelay);
http://codepen.io/anon/pen/ZpYEvL

Bootstrap popover: hide when cursor moves outside of the window

I want to display a popover which contains several buttons when user hovers over a text link
The problem I have is the default Bootstrap popover I'm currently using is dismissed when the cursor from the link which triggered it (e.g. when the user moves to select one of the buttons)
This jsFiddle is an example of what I tried to do.. The principle is: show popover when the link (#example) is hovered, hide popover when the popover (.popover) is unhovered.
But this doesn't work, although I'm sure that the BS popover is encapsulated in a .popover class (I check with FF dev debug tool).
Funny thing: it works with another div! If I replace
$('.popover').mouseleave(function(){
$('#example').popover('hide');
});
By this
$('.square').mouseleave(function(){
$('#example').popover('hide');
});
The popover is indeed hidden when no longer hovering the blue square.
Why doesn't work with .popover?
You need to hide popover when the mouse leaves the .popover-content not .popover. And .popover-content does not exist at the beginning so you need to bind the event to the document
$(document).on('mouseleave','.popover-content',function(){
$('#example').popover('hide');
});
http://jsfiddle.net/o4o9rrsq/2/

Unable to set the absolute position of modal window

I have a jQuery modal window that appears upon click of a button. I have a on the close-modal box where I want to capture the editable text of the modal window upon closing and so I want to make the modal full screen so the user cannot simply click on the main page thus rendering the action on the click of the close modal defunct.
I have tried setting the position as absolute with top:0 left:0 bottom:0 right:0 as mentioned on some posts but this is not working. The modal is being displayed relative to the position of the click despite setting the values in line so I am unsure as to why this is happening. It keeps adding random values to the top style despite being specified.
Is there anyway round this?
Have you try to put the div of the modal window right after de tag? And try to aadd body, html {width:100%; height 100%; }

Jquery UI modal (popup box) control size and hide by default

jsFiddle for this question
I am currently using bootstrap modal, which is a jQuery plugin to create a popup box. (If anyone wants to check out the very short documentation, here is a link to it - it's very short, so only takes a minute).
Unfortunately, I am having a couple problems:
I need to be able to define the size of the modal pop-up box. I tried the following, but it does not display correctly:
<div class="modal" id="myModal" style="width: 800px; height: 900px;">
I need to be able to hide the modal by default. Currently, it displays as soon as the page loads. I tried the following, but it does not seem to hide correctly:
$(document).ready(function() { $('#myModal').modal("hide"); });
Any idea how I might be able to resolve these issues?
Answer 1: Try defining the modal CSS class and set the width and height.
Answer 2: when calling the modal function, pass in an option object with th property "show" as false.
$("#myModal").modal({show: false});
Answer 3: you can handle the "shown" event and wire it up to make an AJAX call to web page and set the result as the inner HTML of the div.
Try the following in the source. Worked for me.
$('#ModalForm').dialog(
{
modal : true ,
autoOpen : false ,
height : 300,
width : 400,
. . . .
try this
<div class="modal" id="myModal" style="width:800px;height:900px;display:none;">
To answer the second question the documentation says you can add an option like $('#myModal').modal({'show':false}) so that on initialization it should not be shown.
Third question's answer is use an iframe or load the html using ajax. To stop people from submitting you could use javascript for that or place a clear div to prevent anyone from actually using it. The first method assumes you are loading the form from the same domain.
Try this to force the dimensions to the what you want $('#myModal').modal({'show':false).height('600px').width('500px');​
You can supply the .hide class to the container of the modal to hide it, which is the default bootstrap method of hiding modals. As to the size, you can again supply your own class with your custom width and height to the container and it should take up on it, the way you're adding it inline now works fine as well, just make sure to add it to the main container.
So all in all your modal container should look like this:
<div class="modal hide fade custom-size" id="myModal"> ... </div>
Note: Added the .fade class to add the transition fade/slide effects, you can remove it if you like if you don't want those effects.
And as for the modal poping up as soon as you load your page all you have to do to remove that behavior is not call the modal at all as you are now, that way the modal will only popup when you click on action or "Launch Modal" button.
Here is a cleaned up fiddle, you had some non-valid styles like float:center (i wish that one existed): http://jsfiddle.net/zkzuM/2/, full page demo: http://jsfiddle.net/zkzuM/2/show/
#myModal{
height:200px;
width:100px;
}
try adding something like this to the css
your javascript
$('#myModal').modal({'show':false});
Take a look at the fiddle and its result.
.modal-body class has a max-height of 400px.
If you want a static height as 900px you should set height and max-height of .modal-body.
Otherwise that close button and its bar might float over the box.
#myModal .modal-body {
height: 775px;
max-height: 800px;
}
It's 775px for a 900px high #myModal because of margins and paddings of the box model.
It's always 125px shorter. If you want to make it dynamic you can write something like:
$('#myModal .modal-body').height($('#myModal').height()-125);
You do it right but have take a look the bootstrap CSS if it use the max-width min-width and comment it out.
If it does not work in JS you can do it by putting hide class in modal wrapper.

Categories