I have a bootstrap modal on my web page, but each time I open the modal, it opens below its shadows, how can I resolve this?
<div id="logoutModal" bsModal #myModal="bs-modal" class="modal"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-
hidden="true" >
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Sign Out</h4>
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true" aria-label="Close">×</button>
</div>
<div class="modal-body">
<p><i class="fa fa-question-circle"></i> Are you sure you
want to sign out? <br /></p>
</div>
<div class="modal-footer text-center">
<button class="btn btn-default btn-primary" data-
dismiss="modal" (click)="confirmSignOut()">Sign out</button>
<button class="btn btn-default" data-
dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
i have the solution now.
1. in my custom css file
.modal-backdrop {
//hides the default modal shadow
display: none;
}
.modal {
//modal custom bachground/shadow
background: rgba(0,0,0,0.5);
}
or
.modal{
background-color: rgba(0, 0, 0, 0.3);
}
.modal-backdrop{
position: relative;
}
2. i write my modal html tag as follow.
<div id="logoutModal" bsModal #myModal="bs-modal" class="modal"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-
hidden="true" data-backdrop="false" style="background:
rgba(0,0,0,0.5);">
....
</div>
and that solved my issue.
This could happen when the modal is not a direct child of <body>.
Related
The following code doesn't show the modal on button click, on mobile devices, when the button have an inline style float rule:
<button class="aa-secondary-btn" style="float: left; width: 140px;" title="Add a new product." data-toggle="modal" data-target="#modal">Add New</button>
<!--add product modal-->
<div class="modal fade" tabindex="-1" id="modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
<!--/add product modal-->
It's only when I remove the float rule that the modal shows. What should I do to have the button float and have the modal show on mobile devices?
By using Meshu's suggestion I solved my problem and now the modal shows. Actually, the button is clickable. Below is the solution code:
<button class="aa-secondary-btn" style="position: relative; z-index: 20;width: 140px; float: right;" title="Add a new product." data-toggle="modal" data-target="#add_prod_mod">Add New</button>
<!--add product modal-->
<div class="modal fade" tabindex="-1" id="add_prod_mod" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add New Product</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
I tried to make a modal with an iframe.
<a href="#" data-toggle="modal" data-target="#exampleModal">
<img id="imageresource" src="http://www.justdeluxe.at/wordpress/wp-content/uploads/2019/01/nature-3048299_1920.jpg" style="width: 400px; height: 264px;"></a>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-body">
<iframe src="https://player.vimeo.com/video/80836225?badge=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
</div>
</div>
What I found out is, when u remove the <div class="modal content"> I have my iframe perfectly responsive.
The problem is, that I cant play the video. So the iframe doesn't responsive when clicking.
Does anyone know why?
The original code for the modal was this: https://getbootstrap.com/docs/4.0/components/modal/
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Instead of removing the .modal-content, override its style:
#exampleModal .modal-content {
background: transparent;
border: none;
}
Example: https://jsfiddle.net/Sirence/jdfg5to6/5/
when I use the bootstrap's modal like this:
<style>
.modal-content {
border-radius: 60px;
}
</style>
<div id="upload-loading" class="modal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button id="loadingClose" type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload in progress...</h4>
</div>
</div>
</div>
</div>
it shows an underline
I tried to add this style
<style>
.modal-content, .modal-content * {
text-decoration: none !important;
}
</style>
but it doesn't seem to make any difference..
.modal-content {border: 0px solid rgba(0, 0, 0, 0.2);}
Just give border to the class .modal-header
I just solve it in React
<div>
{/* Button trigger modal */}
<button type="button" className="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
Launch demo modal
</button>
{/* Modal */}
<div className="modal fade" id="exampleModalCenter" tabIndex={-1} role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div className="modal-dialog modal-dialog-centered" role="document">
<div className="modal-content">
<div className="modal-header" style={{border:"1px solid #fff"}}>
<h5 className="modal-title" id="exampleModalLongTitle">Buy Premium</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<p>Your account is limited to only 3 CV views.
To review more, purchase Premium Subscription</p>
<button className="btn btn-primary">Purchase</button>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
I have a bootstrap modal window on my site that I can't seem to get styled consistently.
This is what my first modal looks like (and how I want it styled):
This is the 2nd modal window and styling:
here is the css that styles the title and the close:
.modal-title {
margin: 10px !important;
}
.close {
opacity: 1 !important;
position: relative !important;
padding-right: 15px !important;
top: 7px !important;
left: 3px !important;
}
Here is a copy of the relevant html for the modal windows:
<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<h4 class="modal-title">They Live (1988)</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div classs="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<br>
<h4 class="modal-title">Send Me a Note</h4>
</div>
<div class="modal-body">
<form id="contact-send" method="post" action="">
...
</form>
</div>
</div>
</div>
</div>
The html to call the modals:
Movie
and
<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>
edit 1: There are no parent divs. I did as suggested and removed the !important elements. I do have a form on the 2nd modal window and an iframe in the first, maybe this has to do with margins being set by those rules...looking into that now. Anyway this is what it looks like right now for the form:
and:
Edit2:
Messing around with my code a bit more, I see that if I remove the modal-header class and put the elements into modal-content that it seems to work. I'll post a final edit if I figure out anything else.
It is a simple syntax error that you may have overlooked.
The .modal-header inside #contactUS is not working because the class attribute is written as classs. Simply remove the extra letter.
You have a <br> tag before the h4 which I assume you added as an attempt to solve the problem. It is not needed so you can remove it.
The correct code would be like this:
.modal-title {
margin: 10px !important;
}
.close {
opacity: 1 !important;
position: relative !important;
padding-right: 15px !important;
top: 7px !important;
left: 3px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
Movie
<button type="button" class="cta btn btn-lg btn-success" data-keyboard="true" data-toggle="modal" data-target="#contactUs">Contact Us</button>
<div id="movie" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<h4 class="modal-title">They Live (1988)</h4>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div id="contactUs" class="modal fade" role="dialog" tabindex='-1'>
<div class="modal-dialog">
<div class="modal-content">
<!-- was classs -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><i class="fa fa-close"></i></button>
<!-- <br> -->
<h4 class="modal-title">Send Me a Note</h4>
</div>
<div class="modal-body">
<form id="contact-send" method="post" action="">
...
</form>
</div>
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/azizn/j1sb9gz3/
I am trying to create a html modal window in zk. But the hide functionality hides also the window as shown i the image
Code snippet:
<tabpanel id="borgerdkRequestPanel2">
<div>
<html xmlns="native" xmlns:u="zul"
xmlns:zk="zk">
<a data-target="#myModal1" role="button"
class="btn" data-toggle="modal">
Launch demo modal
</a>
<div id="myModal1" class="modal hide "
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="false">
×
</button>
<h3 id="myModalLabel1">
Modal header
</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<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>
</html>
</div>
</tabpanel>
It seems to be some kind of zk problem, as the code runs fine in html. CSS is bootstrap. And ZK framework is 7.0.3.
remove hide class from your modal. If you want some animation add instead fade class to your modal.
The result should be this:
<div id="myModal1" class="modal fade"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
Tested on ZK 7.0.4