I am dealing with bootstrap v5.0 offcanvas. Everything was a success until one step.
When i click on offcanvas button, my page seems to be calling both offcanvas-backdrop and modal-backdrop div at the same time
<div class="modal-backdrop fade show" bis_skin_checked="1"></div>
<div class="offcanvas-backdrop fade show" bis_skin_checked="1"></div>
What is the issue that caused this problem ?
I think I'm getting the same issue but when using Bootstrap's classes:
the official example from Bootstrap's documentation is showing a faded offcanvas...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body small">
...
</div>
</div>
Related
I am using React, Bootstrap and jQuery all together. Don't ask me why, i know it's horrible, just don't have time to get rid of jQuery. I use Bootstrap v5 and I got a modal in there, js:
<div
className='modal fade'
id="exampleModal"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div className="modal-dialog modal-dialog-centered">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="exampleModalLabel">
Select here
</h5>
</div>
</div>
</div>
</div>
Now, I got the following as well, js:
<a
className="nav-link wallet-btn"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Connect here
</a>
and this <a just opens a modal which is great. Modal has a x button , js:
<button
type="button"
className="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
and clicking on it just closes the modal.
Problem I need to be able to close the modal programatically. As you can see, bootstrap does all this with I think(not sure) - data-bs-dismiss="modal" , but now I need such thing programatically. I tried to setAttribute but didn't work.
Prefer to use direct js real quick somewhere that fixes it instead of another jQuery code.
https://getbootstrap.com/docs/4.0/components/modal/#methods
Show
$('#myModal').modal('show')
Hide
$('#myModal').modal('hide')
I have a login/signup modal it is working fine,but i need to open the modal when the page loads
I have taken the code from here
I have changed my code like this and i need to open the reset password modal when the page loads.
Modal Code
<div id="cd-reset">
<div class="row">
<div class="col-md-8 col-md-offset-2 Mask2" align="center">
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
</div>
<script type="text/javascript">
$(window).on('load',function(){
$('#cd-reset').modal('show');
});
</script>
but its not working. when I load the page it does not display the modal/popup
can anyone suggest me how to do.
Thanks in advance.
Ideally the bootstrap modals need certain classes to give you the feel. You need to use the exact classes to get the modal pop-up. Also, in your code there is no content (text) and thus why you're not seeing anything.
Code should look like below.
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal">×</button>
<p>Some text in the modal.</p>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I'm having an issue with a Bootstrap modal where if I change the size to small, there is a lingering backdrop modal behind it that is still large.
In the Elements window I can remove the class="modal-content" right before uib-modal-transclude and the modal behind disappears. However I am trying to apply this change in my code and can't get it to work.
First off, this code seems to be coming from uib/template/modal/window.html or https://github.com/angular-ui/bootstrap/blob/master/template/modal/window.html
I am using ui_bootstrap/1.1.2
I tried to overwrite the template using windowtemplateurl and making the new template have:
<div modal-render="true" tabindex="-1" role="dialog" class="modal fade ng-isolate-scope in"
uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1050 + index*10, display: 'block'}"
uib-modal-window="modal-window" size="sm" index="0" animate="animate" modal-animation="true"
style="z-index: 1050; display: block;">
<div uib-modal-transclude=""><!--
<!-- Modal -->
<div class="modal-dialog modal-sm">
<div class="modal-content modal-sm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" ng-click="Cancel()"><span
aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title ng-binding" id="notfound"> Not Found</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="Cancel()">Close
</button>
<button type="button" class="btn btn-primary">Add New</button>
</div>
</div>
</div>
</div>
</div>
</div>
This didn't work. It doesn't seem like changing windowTemplateUrl changed anything at all... I also tried adding css to modal-content, however this screws up other modals on this page.
Am I on the right track? Where is this error coming from? What is the best way to fix it?
In case anyone else has this error, here is what I did to fix it.
I did find a declaration for the size of the modal to be "xl" in my code. Changed that to "sm" and there was still a wrapper around my modal that was 300x184 whereas my modal was 300x122.
I took out the class="modal-dialog" div wrapper and the second modal disappeared.
Are there a way to add a minimize feature to bootstrap modal dialogs?
<div class="modal hide fade modal-admin" id="testModal" style="display: none;">
<div class="modal-header">
<a data-dismiss="modal" class="close">×</a>
<h3 id='dialog-heading'></h3>
</div>
<div class="modal-body">
<div id="dialog-data"></div>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn" >Close</a>
<a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
</div>
</div>
I'm using it like a static draggable dialog:
$('#testModal').modal({backdrop:false})
$('#testModal').draggable({handle: ".modal-header"});
Maybe I'm using a wrong widget for that, but what else?
By minimize I mean that, minimize or collapse the dialog like a little
window widget.
Jquery-ui dialogs have a feature like that: http://jsbin.com/ehagoy/154
Why a -1?
Maybe something like:
$(".modal-header").click(function(){
$(".modal-body").slideToggle();
});
Could help you..
if you want a button for that, only change .modal-header for the button id:
$("#mybutton").click(function(){
$(".modal-body").slideToggle();
});
I am using Twitter Bootstrap's (v3.1) modal dialog and when I show a dialog and dismiss it, any buttons that were not on the screen when the modal displayed are no longer clickable in IE 11.
As shown in the above illustration, the I have multiple buttons to show modals and they are further down the page than where the modal displays (at the top of the page). The first modal displays properly. However, once I dismiss that modal and scroll back down the page to click on another button, the buttons are no longer clickable.
My button code:
<button type="button" id="btnPreviewSales" name="btnPreviewSales" class="btn btn-default" data-toggle="modal" data-target="#previewSalesModal"><span id="btnSalesPrevImg" class="glyphicon glyphicon-eye-open"></span> Preview Sales</button>
My modal code:
<div class="modal fade" id="previewSalesModal" tabindex="-1" role="dialog" aria-labelledby="previewSalesModalLabel" 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="previewSalesModalLabel">Preview Sales</h4>
</div>
<div class="modal-body">
<img src="preview.jpg" alt="Sales Preview" class="img-responsive" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It works fine in other browsers (Chrome, Firefox) and I have the X-UA compatible tags properly set. What can I do to get the buttons clickable again after dismissing the modal in IE?
Ok, I found a solution. I also noticed that the modal was jumping to the top of the page each time and went looking for a solution to that problem. I found Bootstrap modal: background jumps to top on toggle and the recommended the solution was to override a bootstrap style:
body.modal-open {
overflow: visible;
}