Develop Reference

Bootstrap Modal inside modal closes parent modal

Working on bootstrap modal here i'm trying to add modal inside another modal in html as well. Is there a way using jquery target current current modal only.
<div class="modal fade role=" dialog ">
<div class="modal-dialog modal-dialog-centered ">
<!-- Modal content-->
<div class="modal-content ">
<div class="modal-header ">
<button type="button " class="close " data-dismiss="modal " aria-label="Close ">
<svg class="icon-utility-close ">
<use xlink:href="#close-modal-icon "></use>
</svg>
</button>
</div>
<div class="modal-body justify-content-center ">
<p>Text 1</p>
</div>
</div>
</div>
<div class="modal fade role="dialog">
<div class="modal-dialog modal-dialog-centered">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<svg class="icon-utility-close">
<use xlink:href="#close-modal-icon"></use>
</svg>
</button>
</div>
<div class="modal-body justify-content-center">
<p>Text 2</p>
</div>
</div>
</div>
</div>
</div>
I was try to add different id to the close button and hide modal but it is not working. Can anyone point me in the right direction how to achieve.

Bootstrap modal always scroll to top when open

So i made this modal pop up when click image using jquery, but when modal is show the page always scroll to top, i want the page is stay.
here's my code:
<a href="#" class="pop p-2">
#foreach($product->product_photo as $photo)
<img src="{{ $photo->url }}" style="width: 150px;max-height: 150px">
#endforeach
</a>
here's the modal:
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
</button>
<div class="text-center">
<img src="" class="imagepreview" style="width: 500px;" >
</div>
</div>
</div>
</div>
</div>
here's the jquery:
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
i have tried to add
body.modal-open{
overflow:hidden;
}
but it doesn't effect anything

Bootstrap modal not working with timer

Im trying to load a modal after a 3 second page load delay
The code below opens the modal however i cannot close it and the grey overlay is on top of the content etc
Code below
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
$('#myModal').modal();
}, 3000);
});
</script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Join IQ Option Today</h4>
</div>
<div class="modal-body text-center">
<a target="_blank" href="mylink"><img src="myimage.jpg" width="300" height="600" /></a>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>

Fixed!
My css contained z-index:1
I've commented that out and it now works perfectly!

on hover image it should play video

I need some help here..
I have linked video to my images so if someone clicks on my image a video pops up but I want the video should play as soon as someone hovers the image.
SCENARIO: there are 4 images in one row(250*250 pixel size) and If someone hovers the first image or any image the video should play in the same size of image(250*250) and if they move mouse to another image this video should stop and video for that particular image should start playing
HTML:
<div class="row">
<div class="col-md-3">
<img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
</div>
<div class="col-md-3">
<img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
</div>
<div class="col-md-3">
< img src="resources/image.jpg" data-src="https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick="showVideo(this)"/>
</div>
</div>
JS:
function showVideo(obj){
$("#youtube").attr("src", $(obj).data("src"));
$("#videoModal").on("hide.bs.modal", function () {
$("#youtube").removeAttr("src");
}).modal('show');
}
HTML:
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel">
<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="videoModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<iframe id="youtube" width="100%" height="500px">
</iframe>
</div>
</div>
</div>
</div>

Add an iframe after each image with display:none. change to display:block for onMouseOver,and onMouseOut it should change to display:none. Create functions for onMouseOver and onMouseOut in yourjs`.
<div class="col-md-3">
<img id="image" src="resources/image.jpg" data-src = "https://www.youtube.com/embed/fIHH5-HVS9o?autoplay=1" onclick = "showVideo(this)" onMouseOver="showVideoOnHover(this)" onMouseOut="hideVideo()"/>
<iframe id="youtube" width="100%" height="500px" style="display:none;">
</iframe>
</div>
And in your js:
//add onHover function.
function showVideoOnHover(obj)
{
$("#image").css("display","none");
$("#youtube").css("display","block");
$("#youtube").attr("src", $(obj).data("src"));
}
function hideVideo()
{
$("#youtube").css("display","none");
$("#image").css("display","block");
}

jquery dynamic image gallery popup show all images

i want to create dynamic model popup so i have write below js code..but when i have click on single image then model pop up show all images content in dynamic created div . i want same image and its content in model popup.
<script>
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('#imageresource').attr('src'));
$('#imagemodal').modal('show');
});
</script>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12" >
<div class="row">
<div id="pop">
<a href="#" class="dialogpopup" style=" height: auto;width: 600px;display: -webkit-inline-box;">
<div ng-repeat="Spaces in SpaceList" style="height:auto!important;display: table-caption;">
<span>{{Spaces.Name}}</span>
<img id="imageresource" src="{{Spaces.Image}}" style="width:200px; height: 200px;">
<span>{{Spaces.MaxCapacity}}</span>
</div>
</a>
</div>
<!-- Modal -->
<div class="modal fade" id="imagemodal" 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">{{Spaces.Name}}</h4>
</div>
<div class="modal-body addright" id="modelimg1" ng-repeat="Spaces in SpaceList">
<img src="{{Spaces.Image}}" id="imagepreview" style="width:400px; height: 270px;">
<p class="parapadding">
Name:{{Spaces.Name}}<br />
Description:{{Spaces.Description}}<br />
Size:{{Spaces.Size}}<br />
Capacity:{{Spaces.MaxCapacity}}<br />
Configuration:<br />
</p>
</div>
</div>
</div>
</div>
</div>
</div>

ID param of any tag should be unique. And in your repeater you have same ids. Change it to smth like id="{{'imagepreview' + $index}}" and
ng-repeat="Spaces in SpaceList track by $index"