I have the following codes:
<div id="makatiPD" class="modal fade">
<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">Makati City Office</h4>
</div>
<div class="modal-body">
<iframe width="540" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=King's+Court+Building.,+Makati+City,+Metro+Manila,+Philippines&aq=0&oq=kings+court&sll=13.656663,124.090576&sspn=9.2249,9.876709&ie=UTF8&hq=&hnear=King's+Court+Bldg+2,+Dela+Rosa+Street,+Lungsod+ng+Makati,+Metro+Manila,+Philippines&t=m&ll=14.558164,121.013203&spn=0.029076,0.046349&z=14&iwloc=A&output=embed"></iframe><br /><small>View Larger Map</small>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<div id="quezonPD" class="modal fade">
<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">Quezon City Office</h4>
</div>
<div class="modal-body">
<iframe width="540" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Phil-Data+Building,+265+E.+Rodriguez+Sr.+Avenue,+Quezon+City,+Metro+Manila,+Philippines&aq=&sll=14.618293,121.006191&sspn=0.00898,0.009645&ie=UTF8&hq=Phil-Data+Building,&hnear=E+Rodriguez+Sr.+Ave,+Quezon+City,+Metro+Manila,+Philippines&ll=14.618293,121.006191&spn=0.006295,0.006295&t=m&output=embed"></iframe><br /><small>View Larger Map</small>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
It's working perfectly fine and have no problem with regards to calling it. However, doesn't this kind of set up somehow hinder my site's loading time? I haven't really experienced any trouble but since I'm still running the website locally, I'm not quite sure if this might generate a few problems when I do deploy it.
More info:
The page loads just fine locally, but it continues to show that it's loading something. (I think it's the 2 iFrames.)
So is there some way to somehow only load the iframes when I fire each individual modals?
First, there is no iframe component is used in Bootstrap Modal. It's using div. Yes it is possible, if you want to load it dynamically you can load using ajax and javascript.
Inside .modal-body you have used iframe, for loading each modal differently try to load with ajax and with javascript after successfully the request is made and after receiving the result with javascript you can show the loaded modal like-
$('#ModalId').modal();
Twitter-Bootstrap Modal is designed to be a just another div which will be hidden initially, but show up on some action...
Yes, you can dynamically load that div. Here is an example of how to do it.
Related
The command below works but the main page is waiting for iframe to load opening for him takes a long time sometimes.
How can I get the iframe to load just by clicking the shortcut.
<li>
carlist
</li>
<div class="modal fade" id="carlist" tabindex="-1" role="dialog" data-toggle="modal3" aria-labelledby="myModalLabel" data-backdrop="false">
<div class="modal-dialog modal-fluid modal-notify modal-success" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Car List</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<!--Body-->
<div class="modal-body">
<div class="text-center">
</div>
<iframe src="carlist.aspx" width="100%" height="500"></iframe>
</div>
Maybe you could use a button. When onClick you try to open the iframe.
Is carlist.aspx part of your project?
I am having trouble displaying a bootstrap modal on my site. The modal div is too tall and too narrow relative to the modal-dialog div.
This is where I am toggling the modal.
<footer>
<div id="header-footer-content" class="container">
Contact |
Privacy Policy
</div>
</footer>
And this is how I am defining the modal. (Note the modal is actually defined in a partial view in my rails project, but the html below is the result post-rendering.)
<div class="container>
<div class="row">...</div>
<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" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<p>some text</p>
</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>
</div>
I'm using the example modal from the bootstrap website, so I'm not sure why it's being displayed like this. Does anyone have any experience with this kind of graphical issue?
EDIT: I am using bootstrap v3.3.4. The site can be found here.
I think it might have something to do with the container div you have wrapped around your modal. Try removing that and maybe also try removing the empty row at the top of it too.
I am using a third party plugin and pulling in the shortcode (NextGen Gallery plugin) which works perfectly - but when you click on the image it moves to a new browser window to show the full screen image. I am wondering how I wrap shortcode to show within the modal?
<a href="#gallery" data-toggle="modal">
<?php echo do_shortcode('[ngg_images gallery_ids="1" display_type="photocrati-nextgen_basic_thumbnails" excludes="4,6" gallery_height="400"]'); ?>
</a>
Here is my 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" style="margin-top:200px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Club video</h4>
</div>
<div class="modal-body">
<iframe width="100%" height="500" src="//www.youtube.com/embed/4UnLo57BhEA" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
I am a little stuck for ideas... :S
i am using bootstrap modal in my asp.net project and my code is
<div id="mymodal" class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a id ="closemodal" href="#" class="btn">Close</a>
Save changes
</div>
</div>
and my javascript in my master page is
<script type="text/javascript">
$(function () {
$('#closemodal').click(function () {
$('#mymodal').modal('hide');
});
});
</script>
but the modal doesn't closes when i click close button
in firebug, error is shown with the java-script writing it's not a function
The point of bootstrap is that you shouldn't need that jQuery to get it to work. You can delete that javascript and just add an attribute to your close button and it should work: (it is the data-dismiss="modal" that closes the modal popup.)
<div id="mymodal" class="modal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<a id="closemodal" href="#" class="btn" data-dismiss="modal" aria-hidden="true">Close</a>
Save changes
</div>
</div>
You need the bootstrap javascript file included in your master page, which I assume must already be there if you have a modal popup that is popping up as normal.
<script language="JavaScript" type="text/javascript" src="bootstrap.min.js"></script>
I am having an issue with the Modal component of bootstrap.
The problem is that when I try to call the modal from the code behind it is showing up but the modal loses its efects, the background does not turn gray and the modal does not slide from the top.
Please find below my code.
<div class="modal" data-backdrop="static" data-keyboard="false" runat="server"
visible="false" id="myModalServicios" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
</div>
</div>
Code Behind:
myModalServices.Visible = true;
In your markup, the div's id is myModalServicios but your code behind references myModalServices