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();
});
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 have a confirmation dialog that is resurfacing on some pages so I thought that I can make a thymeleaf fragment for it.
I created a new html page (modal.html) and a div containing the modal:
<div th:fragment="confirm">
<div id="confirm" 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">Please confirm</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
<a id="btn-confirm" class="btn btn-primary pull-right">Confirm</a>
</div>
</div>
</div>
</div>
</div>
Then I included it like this on the pages:
<div th:include="fragments/modal :: confirm"></div>
This kind of syntax worked for my header.
The problem is that it is visible at all times now.
When I include the same modal code on the page directly it only pops up when toggled.
Can someone help me?
Thanks!
The modal CSS class has display: none;, so it's hidden by default.
Your div that includes the fragment probably is inside an element that has a CSS class that sets the CSS display property to something different than none, and overwrites the modal CSS class.
Check in the developers extension (F12) the style of the element to see what overwrites the display property
And make sure you include
<link rel="stylesheet" th:href="#{/css/bootstrap.min.css}"/>
I am working on a project that use bootstrap, in it I need to show modal windows that contain other html page I use the following code
<a class="menuItemManageContent"
href="<%= request.getContextPath()%>/news/index/NEWS/0943ac5b-e556-49eb-acef-a112a56e3e7b/managePortlet.html"
data-toggle="modal" data-target="#modal-table_<%= request.getParameter("instanceId").toString() %>">Manage content</a>
<div id="modal-table_<%= request.getParameter("instanceId").toString() %>" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
<div class="table-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
<span class="white">×</span>
</button>
mange
</div>
</div>
<div id="contentBody" class="modal-body no-padding">
</div>
</div>
<!-- /.modal-content -->
</div>
</div>
the code above work fine , it is showing the modal with my page in it the only part I need to put my content in contentBody so I still have the header for the modal as I design it, my question here is there is an easy way to do that with no javascript, can I tell the data-target to put the page in the contentBody div instead of the default modal content which is override my div.
fine, i got it work I just move the header out of the content and that solve the issue, I will leave this question hopefully it help someone else
I'm using Bootstrap 2.3.2 via the bootstrap-sass-2.3.2.2 gem in a Rails app.
With the following HTML:
<div class="modal hide fade fullscreen" id="myModal" aria-hidden="true">
<div class="modal-header">
<h3></h3>
</div>
<div class="modal-body">
<img src="">
</div>
<div class="modal-footer">
<a class="figureFullsizeLink btn" href="">Full-size</a>
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
And links like these:
<a href="#myModal" class="btn" data-toggle="modal" data-html="true">
<img alt="Fig 1" class="figure" src="http://s3.amazonaws.com/..." title="..." />
</a>
And the following javascript:
$(document).ready(function() {
...
// hide the modal window onload
$("#myModal").css("display", "none");
...
});
I get a momentary flash of the open modal dialog while the page is loading. (see https://www.youtube.com/watch?v=X-HwRpKAUh8 for an exampe).
Your jQuery code runs after the DOM hierarchy has been fully constructed. Therefore the modal will be displayed when the DOM loads, and then the javascript will execute and hide the modal.
The easiest way to have the modal hidden by default is to set the CSS to:
#myModal{display:none};
Or, you can always place your jquery code within the
<head>
element of your page and it will execute before the DOM is constructed.