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
Related
I am using bootstrap 4 and I added a modal in my form in laravel project.
Code:
........
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<button type="button" id="order-btn" class="btn btn-yellow-hub rounded-pill px-30">Procced</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="confirmOrder" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-height">
<div class="modal-header" style="background-color: #D0D0D0">
<h5 class="modal-title">Order Confirmation</h5>
</div>
<div class="modal-body">
<p>Your credit balance will be charge RM{{$rate->cost}} for the invoice. Proceed this order?</p>
<div class="text-center">
<button type="submit" class="btn btn-primary confirm-pay-now ">Pay Now</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>
Basically, the data dismiss for close button is not working and nothing happens when I clicked it. I checked the bootstrap documentation and everything seems to be in order. Some of the solutions I have tried is removing fade class which does nothing. I also tried adding $('#closeButtonID').modal('hide'); but it does not seem to work as well.
How do I fix this?
Make sure If you use CDN then check you your internet connectivity or you use local library then try to go at view page source check that you local library correctly integrate with you webpage..
or I think you need to go through with below reference link try it
https://getbootstrap.com/docs/4.0/components/modal/
Can you try
$('#confirmOrder').modal('hide');
instead of
$('#closeButtonID').modal('hide');
Can you try giving it to the event handler of the button click as
$('. btn-secondary').on('click', function() {
$('#confirmOrder').modal('hide');
})
Try This
<div class="col-md-12">
<div class="row">
<div class="col-md-12">
<button type="button" id="order-btn" class="btn btn-yellow-hub rounded-pill px-30" data-target="#confirmOrder" data-toggle="modal">Procced</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="confirmOrder" tabindex="-1" role="dialog" aria-labelledby="ModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content modal-content-height">
<div class="modal-header" style="background-color: #D0D0D0">
<h5 class="modal-title">Order Confirmation</h5>
</div>
<div class="modal-body">
<p>Your credit balance will be charge RM{{$rate->cost}} for the invoice. Proceed this order?</p>
<div class="text-center">
<button type="submit" class="btn btn-primary confirm-pay-now ">Pay Now</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</form>
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?
Using bootstrap 3.3.5 and trying to open a second modal, and found a strange behavior:
The backdrop do not show around the second modal, instead of it
covers the backdrop from the first modal
The second modal is
limited to the area of the first modal.
Check the example: http://jsfiddle.net/2zqe93u1/show/
Looking for a way to show the second modal with the backdrop around it and with no area limited by the first modal.
Code:
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>
As said #Tim Lewis bootstrap doesn't support stacked modal and Showing more than one modal at a time requires custom code
First Remove 2nd modal HTML inside the First Modal and put it outside, so the HTML will be;
<div class="modal bs-modal-lg" id="FirstModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="FiltroLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<span class="modal-title">Title #1</span>
</div>
<div class="modal-body">
<a data-toggle="modal" href="#SecondModal" class="btn btn-primary btn-block">Open the second modal</a>
</div>
<div class="modal-footer">
<a data-loading-text="Wait" class="btn btn-default">Cancel</a>
</div>
</div>
</div>
</div>
<div class="modal" id="SecondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title #2</h4>
</div>
<div class="modal-body">
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
<p>Second Modal</p>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-number="2">Close</button>
</div>
</div>
</div>
</div>
It will fix the problem second modal is limited to the area of the first modal.
Now to fix the problem backdrop do not show around the second modal, instead of it covers the backdrop from the first modal
add following code in JS
$(document).ready(function () {
$('#SecondModal').on('show.bs.modal', function () {
$('#FirstModal').css('z-index', 1039);
});
$('#SecondModal').on('hidden.bs.modal', function () {
$('#FirstModal').css('z-index', 1041);
});
});
Fiddle
You have to work with two modals separeted to achieve this goal.
The first point i can do it with this
https://jsfiddle.net/2zqe93u1/
$('#FirstModal').modal('show');
$('#SecondModal').on('shown.bs.modal', function (e) {
$('.modal-backdrop').first().appendTo($(this).parent())
})
$('#SecondModal').on('hidden.bs.modal', function (e) {
$('.modal-backdrop').first().remove()
})
$("button[data-number=2]").click(function(){
$('#SecondModal').modal('hide');
});
But i can't understand the second one, if the second modal can be dragged out of the first, why the backdrop must be on the first?
But with the events ocurring on modal i'm sure you can do this.
Take a look at jsfiddle to catch the ideas
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 trying to insert video in the page which i am working on. But my page is not displaying poster image. Only the video is working when played. Why?
<body class="page page-index">
<!-- Button to trigger modal -->
Launch demo modal
<!-- Modal -->
<div id="myModal" class="modal hide fade" style="overflow:hidden" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header" style="padding:0px 0px;">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body" style="max-height:none" >
<video controls height="480" width="480" poster="img/poster480.png">
<source src="video/sample.mp4" type="video/mp4">
</video>
</div>
</div>
<script src="js/bootstrap-modal.js"></script>
<script src="js/script.js"></script>
</body>
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">
Launch demo modal</a>
<!-- 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"
aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<video controls height="400" width="400" poster="images/amit.jpg">
<source src="images/big_buck_bunny.mp4" type="video/mp4">
</video>
</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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Tested in Google Chrome and Firefox was working as expected.
Please note : I used bootstrap.min.js of version v2.3.1, Please check if u are using an older version.
Cheers!!