I am using bootstrap modal dialog. I need to change it so that the modal appears quickly without any animation. But when it closes, it should fade out slowly. so, that the animation is visible.
Below is my html code for the popup.
<div class="modal" id="pleaseWaitPopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body text-center">
<p><i class="fa fa-spinner fa-5x fa-spin fa-pulse" aria-hidden="true"></i></p>
<p class="light-gray-pop"> Processing Your Request.</p>
<h3> PLEASE WAIT</h3>
</div>
</div>
</div>
</div>
and below is the js for showing the modal dialog.
$('#pleaseWaitPopup').modal({
backdrop: 'static',
keyboard: false
});
You can try adding/removing the class="fade" for the bootstrap modal. Remove the fade animation right before the modal is shown and then add it back once the modal is displayed:
// Remove the fade animation for the modal before the modal is shown
$('#pleaseWaitPopup').on('show.bs.modal', function () {
$(this).removeClass('fade');
})
// Add the fade animation for the modal once the modal is shown
$('#pleaseWaitPopup').on('shown.bs.modal', function () {
$(this).addClass('fade');
})
$('#pleaseWaitPopup').modal({
backdrop: 'static',
keyboard: false
});
Here is a bootply
http://www.bootply.com/USl2vMXKCj
I added temporary close and open buttons to be able to toggle the modal but feel free to remove them as needed/
Related
I am using an iframe to display a php page. I used a script within the iframe that sizes it to the documents height. This allows the user to scroll the main window without having dual scroll bars on the page. I am using a bootstrap modal within the iframe to display an image. The issue is that when clicked the modal popup is displayed at the top center of the iframe. However if the user had to scroll down the list prior to clicking the 'show image' button, they wont find the popup unless they know to scroll all the way back to the top.
I have searched relentlessly for a solution to this within this site and google with no clear understandable answer. Hoping one of you experts can enlighten me.
Here is my modal code:
<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"></h4>
</div>
<div class="modal-body">
<img id="img" src="" width="100%" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Here is the script:
<script>
$(document).on('click', '.getinfoBtn', function(e){
var image=$(this).attr('data-image');
$('#img').attr('src', image);
return false;
});
</script>
Here is the iframe script used to get height of content to be displayed:
<iframe id="form-iframe" src="rooz/on-tap.php" style="margin-top:20px; width:100%; height:150px; border:none; overflow:hidden;" scrolling="no" onload="AdjustIframeHeightOnLoad()"></iframe>
<script type="text/javascript">
function AdjustIframeHeightOnLoad() { document.getElementById("form-iframe").style.height = document.getElementById("form-iframe").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("form-iframe").style.height = parseInt(i) + "px"; }
</script>
As stated previously, this code works but pops up the image at the top center of the iframe. I would really like it to either pop up near the button clicked or at least visible.
In my case, using Bootstrap 3.4, what I could make is to catch the show.bs.modal event and setup its position according the click. To avoid the glitch effect, I hide the modal and show it after move it.
I didn't find the way to parametrize the modal in its creation to set it up, instead of enforce it.
$('#theModalDiv').on('show.bs.modal', function (event) {
const modalWidth = 600; // Because #attendeesModal has no lg nor sm size
// and by default, bootstrap modals has 600px width
const target = $(event.relatedTarget);
let newLeft = (document.getElementById('iframe-content-body').offsetWidth/2) - (modalWidth); // Centering the modal
const modal = $(this); // Getting modal instance
modal.css('opacity', '0'); // Hidding modal
// After some time...
setTimeout(() => {
modal.offset({
// ...setting new modal position
...target.offset(),
left: newLeft,
});
// ...setting same top position as the click
$('.modal-dialog').css('margin-top', 0);
// ...displaying again the modal
modal.css('opacity', '1');
}, 500); // This value was taken with rule of thumb
});
I hope someone can find this usefull.
I have used modal popup of Bootstrap in my project and want following things:
When open modal popup and click on the background popup should not close.
When open modal popup background should not blur, meaning opening modal popup background should not affect any way.
After open modal popup user can also work on the background that time popup should not close.
1) When open model popup and click on the background popup should not close.
Include data attributes data-keyboard="false" data-backdrop="static" in the modal definition itself:
<div class="modal fade" id="myModal" role="dialog" data-keyboard="false" data-backdrop="static">
// Modal HTML Markup
</div>
2) When open model popup background should not blur. meaning opening model popup background should not affect any way.
Set .modal-backdrop property value to display:none;
.modal-backdrop {
display:none;
}
3) After open model popup user can also work on the background that time popup should not close.
Add values in .modal-open .modal
.modal-open .modal {
width: 300px;
margin: 0 auto;
}
SideNote: you may need to adjust the width of modal according to screen size with media queries.
Disclaimer: This answer is only to demonstrate how to achieve all 3 goals If you have more then one bootstrap modal, above changes will effect all modals, highly suggesting to use custom selectors.
.modal-backdrop {
display: none !important;
}
.modal-open .modal {
width: 300px;
margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">Open Modal</button>
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br> This is a text and can be selected for copying
<br>
<div id="myModal" class="modal fade" role="dialog" data-backdrop="static">
<div class="modal-dialog modal-sm">
<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>
Working Fiddle Example
backdrop="false" will remove background black screen only but it will not allow you to do anything on background element.
To keep background interactive and keeping modal in middle position with full view you need to remove 'modal' class using js code after modal generate.
and need to use some custom css style. Add a custom class with modal
<div class="modal fade custom-modal" id="myModal" role="dialog">
<div class ="modal-dialog" role="document">
<div class ="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header moveable-modal-header"></div>
</div>
</div>
</div>
</div>
//cs styles//
.custom-modal{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: fit-content;
height: fit-content;
padding: 0 !important;
}
.modal-dialog{margin: 0;}
now after populate modal need to remove 'modal' class from myModal div
function openModal(){
$("#myModal").modal({backdrop:false,show:true});
$("#myModal").removeClass("modal");
//this will make modal moveable//
$("#myModal .modal-dialog").draggable({
handle: ".moveable-modal-header"
});
}
If you want to work on input/textarea elements when the modal is open you can use this.
$('#myModal').on('shown.bs.modal', function() {
$(document).off('focusin.modal');
});
We had been struggling with modals opening in background since 6 months and the following settings has resolved it for all our clients:Please change the cache behavior in IE from “automatic” to “Every time the page changes”.
I'm using the Angular UI modal and would like to make it smaller. According to Bootstrap's website, to make the modal smaller I should use the modal-sm modifier class:
<div class="modal-dialog modal-sm">
I'm having trouble incorporating this div into my Angular modal template. Every Angular UI modal example I have found includes only the modal-header, modal-body, and modal-footer divs in the template. Are the outer modal, modal-dialog, and modal-content divs already provided by Angular? If so, is there any way to overwrite them so that I can apply "modal-sm" to the modal-dialog div? I tried adding the full modal div structure to the template and it caused problems with my modal. I also tried setting windowClass = "modal-dialog modal-sm" in my controller but that didn't work either. Any ideas? Thanks.
Update: here is the content of my modal template after I tried to include the outer Bootstrap div's. It is a very simple modal to confirm the user wants to delete an item.
<div class="modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4>Confirm Delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete?</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="confirm()">Confirm</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
</div>
The result is it doesn't show my modal correctly. I can see the backdrop and a very tiny sliver of what I assume to be my modal.
Update: Using #lmyers's solution worked for me, but instead of specifying the width as 60% I did the following to make use of the #modal-sm Less variable.
.confirm-modal .modal-dialog {
width: #modal-sm;
}
OK, I understand now. Here's what we did in the .css:
.appcustom-modal-med > .modal-dialog {
width: 60%;
}
then in the controller:
windowClass: 'appcustom-modal-med'
I never had an experience with Bootstrap modal popup before. But in a recent theme purchase that was fully bootstrap based they demoed modal popups too which was perfectly working on their HTML page. But when I integrate in my master page, everything working fine. But the modal popup alone shows as double as you can see in the image below
I didnt get any idea why it behaves likes this when everything in the HTML page and ASPX page are alike. Also when the modal popup shows, there is a shifting like thing goingon on the page or a kinda small jumping towards the right when the modal popup comes.
Here is my modal popup code
<div class="modal fade bs-example-modal-sm" id="mytestmodal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
...
</div>
</div>
</div>
And here is the button code
<button class="btn btn-info btn-block" data-toggle="modal" data-target="#mytestmodal">
<i class="fa fa-copy"></i>| Clone Data
</button>
For that jumping, edit it's CSS
body.modal-open{
overflow: visible !important;
}
The lateral shifting is a known open bug in Bootstrap.
Assuming your modal isn't long enough to need to be scrolled, you could try this supposed workaround:
.modal {
overflow-y: auto;
}
.modal-open {
overflow: auto;
}
I'm pretty stuck on this problem that I'm having getting Bootstrap modals to pop up. Here's an example:
http://jsfiddle.net/xaU5d/
<div class="container">
<h2>Example of creating Modals with Twitter Bootstrap</h2>
<div id="example" class="modal hide fade in" style="display: none; ">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>This is a Modal Heading</h3>
</div>
<div class="modal-body">
<h4>Text in a modal</h4>
<p>You can add some text here.</p>
</div>
<div class="modal-footer">
Call to action
Close
</div>
</div>
<p><a data-toggle="modal" href="#example" class="btn btn-primary btn-large">
Launch demo modal</a></p>
</div>
And pulling the css from:
//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css
Essentially, the when the button is pressed, the modal tries to load (the style changes to the body happen which causes it to dim), but the tags containing the modal content never get rendered.
I believe this is a CSS problem at heart. When you remove the css and rerun, the styles go away, of course, but clicking on the anchor actually causes the change to happen.
I have to assume it's something that I'm doing, so could anyone look at the jsfiddle example and let me know where my error is?
Thanks in advance!
Not a full answer, but adding modal-content to your `div id="example`` allows the modal to run, but not on the correct layer.
Bootstrap 3 changed how they load modals a bit:
Modal markup has changed significantly. The .modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior.