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/
Related
and this is part of my code
<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" style= "font-family: 'Nanum Myeongjo', serif;">THANK YOU</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body textalert" style="font-family: 'Kanit', sans-serif;">
ระบบได้ทำการจองสินค้าของท่านเรียบร้อย
</div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
How can I move "THANK YOU" to center? I have already tried centering it with align, but it doesn't seem to work.
EDIT: I created a container div element that contains the modal. Now you can use text-align: center; so that you can center the 'THANK YOU' text. Also, I added fit-contents so that the container can be easily moved about and resized as needed without effecting it's content or the other way around.
<body>
<div class="modal-container" style="width: fit-content; height: fit-content;">
<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" style= "font-family: 'Nanum Myeongjo', serif;text-align: center;">THANK YOU</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body textalert" style="font-family: 'Kanit', sans-serif;">ระบบได้ทำการจองสินค้าของท่านเรียบร้อย </div>
<div class="modal-footer">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</body>
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 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>.
A bootstrap modal in one of my sites is working perfect when i view it localy (the PDF is loading fine) but online although the modal is working the PDF is not diplayed.
Any ideas?
Thank you
<button type="button" class="btn btn-lg btn-outline" data-toggle="modal" data-target="#myModal">
<i class="fa fa-download"></i>Launch my CV
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" 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">CV</h4>
</div>
<div class="modal-body">
<embed id="modalembed" src="img/cv.pdf" data-backdrop="static" data-keyboard="false">
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
I created a simple HTML with bootstrap 3.2 :
<body>
<div>
<a class="btn" href="#frmLogin" data-toggle="modal">login</a>
</div>
<div class="modal fade" id="frmLogin" role="dialog">
<div class="modal-dialog">
<div class="modal-content>">
<div class="modal-header">
<a class="btn" data-dismiss="modal">×</a>
<h3 id="modalTitle">Login</h3>
</div>
</div>
</div>
</div>
</body>
but the modal does not show correctly.
fiddle link : http://jsfiddle.net/jsmLxhv9/1/
I'm a little late to the party here, but I had the same issue, which lead me to this post. The issue with the posted code is that
<div class="modal-content>">
needs to be
<div class="modal-content">
Other than that, it works fine. Check it out here: http://jsfiddle.net/hjqo17dq/
<body>
<!-- Button trigger modal -->
<button class="btn" data-toggle="modal" data-target="#myModal">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
</body>