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"
Related
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.
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
I know this is the basic question, but I'm not able to solve this. Please do help me.
I'm trying to load the content of div on a click of a hyperlink into the bootstrap modal. How can I able to do this?
Below is my code :
<a id="myModalId" href="#">myLink1</a>
<a id="myModalId" href="#">myLink2</a>
my modal structure:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<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>
</div>
<div class="modal-body">
<!-- I would like my div content here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and here's my div structure:
<div>
<div id="d1" style="display:none">
div1 content
</div>
<div id="d2" style="display:none">
div 2 content
</div>
and modal calling function:
$(document).ready(function(){
$('#myModalId').click(function(){
$('#myModal').modal('show');
});
});
.
There are few such links and for each link I wold like to load a separate div using only single modal.
Can we do this ?
U can use this function to load content in order by the clicked button link:
Buttons:
myLink1
myLink2
Modal:
<div class="modal fade" id="myModalId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false" >
<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>
</div>
<div class="modal-body">
<div id="d1" class="display-none">
div1 content
</div>
<div id="d2" class="display-none">
div 2 content
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Jquery:
$('#myModalId').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget), // here is the button clicked
content = button.data('content'), // here you can get information of the button
modal = $(this); // Here is the modal
modal.find('#'+content).slideDown('fast');
});
CSS:
.display-none{
display: none;
}
You can review this method in the boostrap documentation here: http://getbootstrap.com/javascript/#modals-related-target
Regards!
I have a page of photos where I want to allow the user to click to enlarge that specific image into a bootstrap modal. How can I dynamically add each specific image to the modal on click..my html looks like this:
<div class="container fishing-picture-container">
<div ng-repeat="picture in fishingPictures" ng-if="$index % 3 == 0" class="row row-buffer">
<div class="col-md-4" ng-if="fishingPictures[$index].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index].name}}" ng-click="showModal(fishingPictures[$index].name)" />
</figure>
</div>
<div class="col-md-4" ng-if="fishingPictures[$index + 1].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 1].name}}" ng-click="showModal(fishingPictures[$index + 1].name)" />
</figure>
</div>
<div class="col-md-4" ng-if="fishingPictures[$index + 2].name">
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" ng-click="showModal(fishingPictures[$index + 2].name)" />
</figure>
</div>
</div>
</div>
<!-- Creates the bootstrap modal where the image will appear -->
<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">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
I was thinking I would call a function that would pass in the name of the image and then add that to the modal but doesn't seem to work. Does that seem to be the best way to go about it? Ideally, I would prefer to get a look similar to what it looks like when you click on the image in this link:
http://www.w3schools.com/howto/howto_css_modal_images.asp
Angular script
$scope.showModal = function (imageName) {
angular.element("#imagemodal").modal("show");
$scope.ImageName = "Path here...."+ imageName;
}
Html
<div class="modal-body">
<img ng-src="{{ImageName}}" id="imagepreview">
</div>
--------------------------------------or-------------------------------------
Html
<figure>
<img class="fishing-pics" ng-src="img/fishing/{{fishingPictures[$index + 2].name}}" data-target="#imagemodal" data-imgname="{{fishingPictures[$index + 2].name}}" data-toggle="modal"/>
</figure>
<div class="modal-body">
<img ng-src="{{ImageName}}" id="imagepreview">
</div>
Angular script
$("#imagemodal").on("shown.bs.modal", function (event) {
var imgName= $(event.relatedTarget).data('imgname');
$scope.ImageName = "Path here...."+ imageName;
});
I am trying to play a video when someone hovers on an image and if they click it a pop should display playing that video so far I have achieved pop up and displaying video onclick but I want to achieve this hover thing
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');
}
Some more 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>
You can use the jquery hover function and your own function to play the video:
$('#element').hover(function() {
showVideo();
});