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.
Related
This question might be flagged as duplicate but my issue isn't solved by the things mentioned in the relevant SO thread, here is the link to that
I have to make a modal with an Image into it and stack it into an existing AngularJS application. So, by far what I have done is this. When I do data-backdrop="false", the whole black tint gets removed and that's pretty obvious. But I don't want that. I want the black tint to remain there but behind the modal not stacking on top of it.
How can I do that, without using jQuery.
Here is my code:
<li ui-sref-active="active">
<a href="javascript:;" data-toggle="modal" data-target="#myModal">
<i class="fa fa-bullhorn" style="color: #fff200"></i>
<span id="glow" style="color: #fff200">What's New</span>
</a>
<div id="myModal" class="modal fade" 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>
<h3 class="modal-title" style="color: #000"><strong>New Features</strong></h3>
</div>
<div class="modal-body">
<center>
<img ng-src="{{'images/'+ 'Screen.png'}}" alt="New Features Screenshots" class="img-thumbnail img-responsive">
</center>
</div>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div> -->
</div>
</div>
</div>
</li>
I used to have the same problem like you when using angularjs with bootstrap. Changing z-index of the dialog and the back-drop fixed the issue for me. Hope this helps you.
.modal-backdrop {
z-index: 1040;
}
.modal {
z-index: 9999;
background-color:transparent!important;
}
Hey i know this question is a bit old, but i found a bit of a modification to work for me.
i was using angular cli > 6.0.0. I also used ng-bootstrap version 2.0.0
go into styles.css right under src, use
.modal-backdrop{
z-index: 20;
}
i found that the .modal had a z index of 40 so i just modified the backdrop to have a 20 z index.
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 the intro.js "hints" plugin (https://introjs.com/example/hint/index.html, https://introjs.com/docs/hints/api/) on a bootstrap web site. I need the hints to work on bootstrap modals, however the hints are displayed behind the modal window. I tried adjusting the z-index of the .introjs-hint-pulse and the .introjs-hint-dot selectors and the .modal selector with no results.
Any ideas on what I need to do to get the hints to display above the modal window as needed?
I also need to figure out how to hide all of the displayed hints at once, but then be able to show them again when the link is reclicked - like a toggle. I have one icon used to show the hints, and I want to be able to click again to toggle and hide the hints.
I am including links to the hints API, as it shows the options for refreshing and hiding the hints, but I am new to jQuery & JS and am not sure how to get it to work.
Also, I am trying to figure out a way to auto hide the hints on the modal if the modal is closed with them still visible.
I have a jsfiddle with a test modal and the intro.js hints. If you open the modal, then click on the "Show Hints" link, you will notice the hints are not visible. But if you close the modal you can see the hints are visible behind the modal window.
JS Fiddle link: http://jsfiddle.net/1aeur58f/998/
HTML of example:
<!-- Button trigger modal -->
Open Notes Modal
<!-- Modal -->
<div class="modal fade" id="notesModal" tabindex="-1" role="dialog" aria-labelledby="notesModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Notes</h4>
</div>
<div class="modal-body">
<div id="note-input" data-hint="Input your notes here." data-hintposition="top-middle" data-position="bottom-right-aligned">
<input type="text" name="note" class="col-md-11" maxlength="300"/><button id="add-note" data-hint="Select Add button to save and add your notes." data-hintposition="top-middle" data-position="bottom-right-aligned">Add</button>
</div>
</div>
<div id="note-total" data-hint="Track your remaining characters here." data-hintposition="top-middle" data-position="bottom-right-aligned" style="margin-left:15px;">0/300
</div>
<div><a class="btn btn-tour" href="javascript:void(0);" onclick="javascript:introJs().addHints();"><i class="fa fa-bus"></i> Show Hints</a></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
The intro.js and introjs.css are linked in the jsfiddle external resources for viewing.
Try with this CSS:
.introjs-hint {
z-index: 9999999 !important;
}
In order to toggle hints you can (for example) do this:
var hints = false;
function toggleHints() {
if (hints) {
$("#txtToggle").html(" Show Hints");
introJs().hideHints();
} else {
$("#txtToggle").html(" Hide Hints");
introJs().showHints();
}
hints = !hints;
}
Check the fiddle updated: http://jsfiddle.net/beaver71/fc0rkakn/
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
I have a web application which uses Bootstrap (2.3.2 - corporate policy, we cannot upgrade to 3.0 without lots of testing across several web applications). We have several long pages within this application that require validation of forms and tables - however due to practical and aesthetic reasons we need to have an alert message appear as a floating div at the top of the page.
This will be a fixed floating div, that can be shown and hidden using javascript as and when needed. This part works and I can control this div, whenever I need to flash some information to the user or some error takes place.
The layout is like so:
<div id="message">
<div id="inner-message" class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
test error message
</div>
</div>
The styling is below:
#message {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#inner-message {
margin: 0 auto;
}
The #message div behaves all well and good, but when I try and add some padding to the #message div (to try and get some space between the edge of the page and the div i.e. padding: 5px), the div only gets padding on the left and top and the rest of the div is pushed out too far to the right of the page (hiding part of the 'x' inside the bootstrap alert).
Has anyone experienced this before? It seems like a simple enough issue, so am I overlooking something?
If you want an alert that is fixed to the top and you are using bootstrap navbar navbar-fixed-top the following style class will overlay they alert on top of the nav:
.alert-fixed {
position:fixed;
top: 0px;
left: 0px;
width: 100%;
z-index:9999;
border-radius:0px
}
This worked well for me to provide alerts even when the user is scrolled down in the page.
Just wrap your inner message inside a div on which you apply your padding : http://jsfiddle.net/Ez9C4/
<div id="message">
<div style="padding: 5px;">
<div id="inner-message" class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
test error message
</div>
</div>
</div>
The simplest approach would be to use any of these class utilities that Bootstrap provides:
Bootstrap 5
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
https://getbootstrap.com/docs/5.0/utilities/position/
Bootstrap 4
<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>
<!-- Deprecated classnames -->
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
<div class="sticky-top">...</div>
https://getbootstrap.com/docs/4.0/utilities/position/
I think the issue is that you need to wrap your div in a container and/or row.
This should achieve a similar look as what you are looking for:
<div class="container">
<div class="row" id="error-container">
<div class="span12">
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
test error message
</div>
</div>
</div>
</div>
CSS:
#error-container {
margin-top:10px;
position: fixed;
}
Bootply demo
Others are suggesting a wrapping div but you should be able to do this without adding complexity to your html...
check this out:
#message {
box-sizing: border-box;
padding: 8px;
}
You can use this class : class="sticky-top alert alert-dismissible"