I'm using angularJS with bootstrap, and I'm creating a modal that will show some infos when you click on a button.
As there will be multiple button around the page, I want that this modal pops up near the clicked button, like the modal top-left corner being on top of the button I clicked.
Is this possible? I tried multiple things and the modal always pops up in the middle of the screen.
Current code I'm trying is:
.modal.in {
position: absolute;
bottom: 0;
right: 0;
left: auto;
top: auto;
bottom: 0;
overflow: auto;
}
.testbox {
background: #fff;
color: #000;
padding: 10px;
min-height: 200px;
min-width: 300px;
position: absolute;
}
and here the htm page that has the modal content:
<div class="testbox">
<div class="modal">
<div class="modal-header">
<h3 class="modal-title" ng-bind-html="title"></h3>
</div>
<div class="modal-body">
<span ng-bind-html="fullText"></span>
<div class="modal-footer">
<button class="btn btn-default" type="button" ng-click="close()"><i class="fa fa-close"></i></button>
</div>
</div>
</div>
</div>
I tried many things in the css but no one seems to be working, I could get something with position: fixed but of course only for one button.
Any ideas?
you might consider using bootstrap popover to do this.
here is an example
<button type="button" class="btn btn-danger popover-dismiss" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
Related
When I scroll the content of Dialog, right top close and right bottom Ok button also getting scrolled.
I want to make those button fixed, not to scrolled so that any time I can close the dialog.
This my code
<div md-dialog-content>
<button class="close" mat-button (click)="onNoClick()">
<mat-icon>close</mat-icon>
</button>
//here my table content
</div>
<div mat-dialog-actions>
<button id="matbuttonClosedownSide" color="primary" mat-button [mat-dialog-close]="null">Ok</button>
</div>
code to open model
const dialogRef = this.dialog.open(myModalComponent, {
width: '80%',
height:'80%',
panelClass: 'my-dialog',
disableClose: true ,
data:this.data[index]
});
I had the same problem, I did it like follows:
.my-dialog {
.mat-dialog-container {
position: relative;
padding-bottom: 50px; // height of your sticky footer
}
.sticky-modal-footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
border-top: 1px solid #efefef;
background-color: white;
padding: 10px 24px;
}
}
And then added the dialog buttons in a footer element:
<button class="close" matDialogClose>
<mat-icon>close</mat-icon>
</button>
<h1 mat-dialog-title>{{ modalTitle }}</h1>
<hr />
<mat-dialog-content> Dialog content </mat-dialog-content>
<footer class="sticky-modal-footer">
<button color="primary">OK</button>
</footer>
I ran into the same problem yesteday. After some research I found the mat-dialog-title and mat-dialog-actions directives. That did the trick for me:
<h3 mat-dialog-title>This is the sticky header</h3>
<mat-dialog-content>
<h3>Lorem Ipsum</h3>
<p>Lorem ipsum dolor sit amet...</p>
</mat-dialog-content>
<mat-dialog-actions align="start">
<button mat-button mat-dialog-close>Cancel</button>
<button mat-button [mat-dialog-close]="true">Accept</button>
</mat-dialog-actions>
You may need to fill the the <mat-dialog-content></mat-dialog-content> with more text to see the scrollbar. But it shows the basic idea: the header stays sticky above the scrollable content and the buttons stay sticky at the bottom.
My sample code is strongly inspired by this official Angular Material Dialog example: https://material.angular.io/components/dialog/examples#dialog-content
I've been piecing together how to make a modal that is relatively unobtrusive.
What I want is for the site visitor to still be able to scroll and interact with the background while the modal is still open.
the modal
<div class="modal fade bd-example-modal-sm profile-completeness-modal" tabindex="-1" role="dialog" aria-labelledby="profile-completeness-modal" aria-hidden="true" data-keyboard="false" data-backdrop="false">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">You're almost there!</h6> <a class="close" data-dismiss="modal">×</a>
</div>
<div class="modal-body">
Your profile is <span id="profile-completeness-percent"><?php echo $user->getProfileCompleteness() ?></span>% complete.
<br />
Click to finish your profile.
</div>
</div>
</div>
css
.profile-completeness-modal{
pointer-events: none;
}
.profile-completeness-modal .modal-dialog {
position: fixed;
left: 0px;
bottom: 0px;
margin-left: 5%;
}
.profile-completeness-modal .modal-backdrop {
display: none;
}
.profile-completeness-modal .modal-open .modal {
width: 300px;
margin: 0 auto;
}
This allows set up allows me to interact with the background (click links, etc) however, I can't scroll until the modal is closed.The modal doesn't have any features that need to scroll in its body.
.modal-open { overflow-y: auto; }
I have the following HTML
<h2 class="border-center-right mt-4">
<span class="bg-white float-left">CREDITCARDNAME</span>
<button type="button" class="btn btn-primary float-right">APPLY NOW</button>
</h2>
I'm using Bootstrap 4. The border is currently overlapping the "Apply Now" button. How can I make it so the border sits behind the button?
THANKS!
I added the code to the following Fiddle: https://jsfiddle.net/katzumi/98c5q2cf/
And these are the border styles currently applied to <h2 class="border-center-right mt-4">:
You should be able to just remove float-left from your span.
I made the border red so it was easier to see against a white background.
<div class="container mb-5">
<h2 class="border-center-right mt-4" style="border-bottom: 1px solid red;">
<span class="d-inline-block bg-white">CREDITCARDNAME</span>
<button type="button" class="d-inline-block btn btn-primary float-right">APPLY NOW</button>
</h2>
<div class="text-4-col">
</div>
</div>
https://jsfiddle.net/98c5q2cf/2/
Fixed! I reduced the width of the element &::after the border-center-right class.
#include media-breakpoint-up(sm) {
.border-center-right {
position: relative;
overflow: hidden;
&::after {
content: "";
display: inline-block;
height: 1px;
position: absolute;
top: 50%;
transform: translateY(-50%);
**width: 50%;**
background: $accent-secondary;
margin-left: 1rem;
}
}
}
Due to reasons beyond my control, we're still using Bootstrap 2.3.2. I have a modal popup that might display anywhere from 1 to 50 lines of information. I made it the maximum size I could to fit on the screen and made the middle part, the .modal-body have a scrollbar if needed. My HTML looks like:
<div id="confirm-popup" class="modal hide fade" role="dialog"
aria-labelledby="confirm-popup-subject" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="confirm-popup-subject">XXX</h3>
</div>
<div class="modal-body" id="confirm-content">
</div>
<div class="modal-footer">
<button id="confirm-popup-edit" class="btn" data-dismiss="modal"
aria-hidden="true">Edit</button>
<button id="confirm-popup-cancel" class="btn" data-dismiss="modal"
aria-hidden="true">Cancel</button>
<button id="confirm-popup-submit" class="btn btn-primary"
aria-hidden="true" data-dismiss="modal">Create Ticket</button>
</div>
</div>
With JavaScript to fill in the $('#confirm-popup-subject') and $('#confirm-content') before popping it up.
I used the following CSS overrides to get this:
#confirm-poup {
top: 2%;
bottom: 2%;
overflow: initial;
}
#confirm-popup .modal-body {
overflow-y: auto;
max-height: 80%;
}
This makes the dialog take up most of the screen, and if it needs a scrollbar it has it. But now the customer is saying that they don't want it to be so big when it only has a few lines of text to display. They want it to be the minimum size it can be and still fit the body text in, but also to still have a scrollbar on the modal-body if the body text won't fit on the screen. Is this possible?
After some experimentation, I got acceptable results if I change the CSS to this:
#confirm-popup {
overflow: initial;
top: 2%;
}
#confirm-popup .modal-body {
overflow-y: auto;
max-height: 70vh;
}
It's not perfect - it overlaps the screen if I make the browser too short - but it works for all supported browser sizes.
How to align vertically middle bootstrap alert dismiss button?
<div class="alert alert-dismissible alert-info" role="alert">
<div class="alert-message">
Multi<br>
Line<br>
Alert
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
Fiddle: https://jsfiddle.net/b5asr9xj/4/
div alert-message is there just because I'm using jQuery.html to update content in it...
You could wrap your text in <p></p> tags and then set text-align: center; on them.
Updated fiddle
Does this solve your problem?
If you want to align it. Vertically in the middle you can do something like this with your current html.
.alert-message {
text-align: center;
button{
display: inline-block;
}
within your alert-message class you align the text to the center and you can then make it display inline(vertical).
see Updated fiddle
You can do like this for vertically middle.
Add parent div to position: relative;
See demo link here. https://jsfiddle.net/rhwxm3md/1/
<div class="alert alert-dismissible alert-info" role="alert">
<div class="alert-message">
Multi<br>
Line<br>
Alert
</div>
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
CSS CODE:
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
color: #31708f;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center;
}