I am using Materialize design. And i am implementing full screen modal. Width is spend in full screen but height is not set in full screen. I have seen one link then i want to implement like this. If any plugin and any other solution, Then let me know.
http://joaopereirawd.github.io/animatedModal.js/
$(document).ready(function(){
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal" style="width:100%;height:100%">
<div class="modal-content">
<h4>Modal Header</h4>
<p>A bunch of text</p>
</div>
</div>
I don't want to same as link(animation). But i want to implement opened modal cover full screen.
In materialize.css file, I looked into .modal selector and it has a property called max-height: 70%; that's why your inline style height: 100% was not working. You can override the default max-height.
CSS
.modal {
max-height: 100%;
}
PICTURE
DEMO
jsFiddle
Related
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 bootstrap for the following mark-up and adding in my own classes of css where needed to style the pages how they are required
.sm-margin {
margin-top: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<div class="thumbnail">
<a href="menu.php">
<img src="img/turkey.jpg" alt="Turkey dinners" style="width:100%">
<div class="caption text-center sm-margin">
<p><button type="button" class="btn btn-success">Check out our menu</button></p>
</div>
</a>
</div>
</div>
I am unclear to why the .sm-margin doesn't add the small margin at the top - see it in effect on my website here
The margin is added to the top of your button in the website
U can inspect and un check the checkbox of your class to see the difference if u use that css class or not...
My code was correct, it was a browser error. I cleared my cache on the Chrome browser and it corrected it.
Thanks all for input.
I have several modals on a website that once I mess around with they load center page when in desktop view but after reopening the projects it will some times load only the left half on the page while the right half is cut off of the page as if it is set to to have the position: right attribute. I have not altered the bootstrap modal section of the css nor the js and am not using anything else besides bootstrap. I created a class to add to the modal to add every since center align attribute possible
.ALmodal{
align-content:center;
align-items: center;
align-self: center;
}
.iframe-container {
padding-bottom: 60%;
padding-top: 30px; height: 0; overflow: hidden;
}
.iframe-container iframe,
.iframe-container object,
.iframe-container embed{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.modal.in .modal-dialog {
transform: none; /*translate(0px, 0px);*/
}
<div class="container">
<!-- Trigger the modal with a button -->
<center> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#schd">Open Large Modal</button></center>
<!-- Modal -->
<center><div class="modal fade ALmodal" id="schd" role="dialog">
<div class="modal-dialog modal-lg">
<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">
<object width="100%" height="500" data="/img/Primal-Kickboxing-2014-Schedule.pdf" >
</object>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</center>
</div>
here is other modal related css that i have in a separate css file
I would refrain from putting extra classes that interfere with the standard BS classes, especially if they are about spacing like your ALmodal.
I have made a default BS Modal here, see the code. It works, also on mobile. The thing is, the Modal is centred by default by BS. So there is no need to make a class that tells it to centre again. That possibly messed it up. Go with the standard classes and take it from there.
http://www.bootply.com/9LUdALseVe
Also you want to look at the BS Helper Classes. There you see a section Center content blocks, have a look at that to see how you can centre content.
Please don't forget that a Modal on top of a Modal is not supported. See here.
If you must have two modal open at the same time look here. Though I really don't recommend that from a UI or UX point of view. Make your designs easy to understand and to follow. Try basic things and take it from there.
Hope this helps a bit. If I am wrong in any point please do let me know so I can avoid the same mistakes in the future. Thank you.
I want to use span structure in modal view but when I use .row, .row-fluid or spans in modal
it overflow modal div.
<div id="login_register_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<!-- Header -->
<div class="modal-header"> </div>
<!-- body -->
<div style="color:black;" class="modal-body">
<!-- I want to use here 2 times span6 in .row div like this but spans overflow -->
<div class="row">
<div class="span-6"> left content</div>
<div class="span-6"> right content</div>
</div>
</div>
<!--footer -->
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
if this is not impossible in bootstrap how can i divide modal two equal part?
how can i divide modal two equal part ?
Tried to implement 2 parts inside the modal and hide one of them through jQuery. TB modal is nothing special just some piece of html.
You can customize it whatever way you want.
but when I use .row, .row-fluid or spans in modal it overflow modal
div.
Do you use fixed width or Height. If you have row or .row-fluid then you need to put your content (html code) inside that div. it will not take more space.
inside TB if you have define .row and use spanx in the div then it will be shown in left:30 something. Maybe that is causing the issue. You can remove the left,right manually by writing custom stylesheet.