I have used a single page HTML page in which I have three div. When I click one of the div modal popups and loads the iframe src. The problem I am facing is iframe is not getting loaded properly when I click the div first time. However in chrome, if I right click and then enter reload frame, my iframe is getting loaded properly. Can anyone say what is the issue I am facing? Why the iframe is not getting loaded properly the first time. I am clueless about this issue. Could anyone please assist me.
My html Code : Posting one div and its corresponding modal popup code
Div Code :
<div class="bots" data-toggle="modal" data-target="#myartModal">
<font class ="botHeading" ><b> Password Related</b></font><br />
<font class = "botsub">Click here to Change,reset,enroll or unlock your account.</font>
</div>
Modal Popup
<div class="container">
<!--<h2>Basic Modal Example</h2>
Trigger the modal with a button
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>-->
<!-- Modal -->
<div class="modal fade" id="myartModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg customModalHeight" role="document">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header customModalHeader">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title" ><b>Account Recovery Agent</b></h3>
</div>
<div class="embed-responsive embed-responsive-4by3 z-depth-1-half customIframeHeight">
<iframe class = "embed-responsive-item" src="http:/xx.xx.xx.xx:4001/" allowfullscreen></iframe>
<!-- <iframe class = "embed-responsive-item" src="http://xx.xx.xx.xx:4001/" allowfullscreen></iframe> -->
</div>
</div>
</div>
</div>
</div>
Related
I have a form page that opens inside a Modal, but when I open the modal, the form does not appear complete, the modal cuts a part of it, is there any possibility of modal getting the page size?
html
<!-- Modal -->
<div class="modal fade" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header bg-warning text-white">
<h3 class="modal-title" id="exampleModalLabel1">Change, Update Wallet</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe id="iframeModal1" class="embed-responsive-item" src=""></iframe>
</div>
</div>
</div>
</div>
</div>
<!--end modal -->
-- EDITED
Solved! I adjusted by putting
<br>
<br>
You use embed-responsive-16by9 (16:9) this only works if your delivered content is not exceeding this ratio.
A possible solution is to add a Listener to wait for your iframe to be loaded:
First remove embed-responsive-16by9
Then set the height of your surrounding conainer to your iframes height
$('iframeModal1').on('load', function({
$('.embed-responsive').height($(this).contents().height());
});
You may want to set the height again in case the windows gets resized (portait/landscape)
$(window).on('resize', ... )
I am trying to load pdf in iframe when clicked on Open PDF on this same page below the table.
This pdf is opening on the new tab when I use target=blank but is not opening in iframe.
<c:forEach items="${files}" var="file">
<tr>
<td>${file.name}</td>
<td>${file.createdOn}</td>
<td>Open PDF</td>
</tr>
</c:forEach>
</table>
<iframe src="" width="100%" height="100%" name="search_iframe"></iframe>
</body>
I am using bootstrap 4 for my one of the theme and I open modal on button click and in that modal I put the iframe for open my PFD. you may also try this once. if you are not using bootstrap you can create your own customize modal.
<a href="javascript:void(0);" data-toggle="modal" data-target="#staffInformationForCBSE">
<div class="modal fade" id="staffInformationForCBSE">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title text_orange">Staff Information for CBSE</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<iframe class="pdf_documents" src="documents/StaffInfoForCBSE.pdf"></iframe>
</div>
</div>
</div>
</div>
I want to load one page inside another(I'm working with laravel ). I have a link on the page, when user clicks on a button, a bootstrap popup modal will be shown. So I need to load the whole page (including scripts and styles) in this bootstrap popup modal. The problem is my loaded page in popup, doesn't work correctly.. and I don't know how to load my scripts into my modal.. I have tried with iframes but it doesn't work either with the error 'X-Frame-Options' with 'deny' value..
Can anyone help me to resolve it?
thanks with regards
its a sample of my code:
<a class="btn"
title="View"
data-toggle="modal"
data-target="#cv_view">
<span class="glyphicon glyphicon-eye-open"></span>
</a>
{{-- modal--}}
<div class="modal fade"
id="cv_view"
tabindex="-1"
role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<iframe
:src="cv.viewRoute"
style="zoom:3"
width="100%"
height="250"
frameborder="0">
</iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
On this example: HTML / CSS Popup div on text click
How can I make this load on the index page when they visit the site the first time. I don't want a button to click, I want this load automatically; and then have a close button when they read the content on the popup. Thanks in advance.
Hi you can do this using bootstrap model popup
for this include bootstrap css and js files and use below code
Your Html Code
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">Intorduction</h4>
</div>
<div class="modal-body">
Body Text
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
</div>
</div>
</div>
</div>
then use this script
<script>
if (localStorage.getItem('showModal')!='yes')
{
localStorage.setItem('showModal','yes');
$('#myModal').modal('show');
}
</script>
I'm making an application form that's on a modal and I made it so the user can upload their picture on the application form. So I have my thumbnail with a "upload picture" bubble inside it, and when I click it, a modal pops up. However the problem is when I click on "cancel" or "upload" on my "upload picture" modal, it closes both modal windows (application form and upload picture).
I'm using bootstrap and here's a snippet of my code:
<div class="modal fade in" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;">
<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" id="myModalLabel">Application Form</h4>
</div>
<!-- START OF MODAL BODY-->
<div class="modal-body">
<div class="col-sm-5">
<div class="thumbnail">
<div class="avatar">
<a href="#" class="thumbnail bottom-15" data-toggle="modal" data-target="#upload-avatar">
<img src="img/face1.jpg" alt="...">
</a>
<!-- Upload new avatar bubble -->
<div class="avatar-bubble">
<i class="fa fa-plus"></i> Upload new avatar
</div>
</div>
</div>
</div>
<!--Modal for uploading photo-->
<div class="modal fade" id="upload-avatar" tabindex="-1" role="dialog" aria-labelledby="upload-avatar-title" aria-hidden="true" style="display: none;">
<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" id="upload-avatar-title">Upload new avatar</h4>
</div>
<div class="modal-body">
<p>Please choose a file to upload. JPG, PNG, GIF only.</p>
<form role="form">
<div class="form-group">
<label for="file">File input</label>
<input type="file" id="file">
<p class="help-block">Files up to 5Mb only.</p>
</div>
<button type="button" class="hl-btn hl-btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="hl-btn hl-btn-green" data-dismiss="modal">Upload</button>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
</div> <!-- END OF APPLICATION FORM MODAL BODY -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Basically I put my second modal within my first modal.
Although the Bootstrap 3 docs say "Overlapping modals are not supported..", I think I found a workaround that works. You need to..
Make sure your 2nd modal's markup is outside the body of the 1st modal
Manually close the 2nd modal by using the Bootstrap modal toggle method in jQuery.
Change the z-index of the 2nd modal so that it appears over the first.
http://bootply.com/108243
Also, I changed your markup to remove the fade and `display:none'.
I've opened a modal from another modal. I call it 'modalception'. It sounds like you just need to make sure your events are targeting the correct modal.
I have overlapping modals, and they work as expected. Clicking the background of the second modal closes that modal only, not the one behind it.
Just set the z-index correctly. Be sure not to nest them, and it should work just fine. It is not "supported", but I do it all the time. A project I am currently working on stacks 3 on top of each other with no problems.
I am using Bootstrap v3.3.2 and jQuery 1.11.2.