I want to click a photo, then it will zoom in.
Like this website --> https://mobirise.com/bootstrap-gallery/
But I just need one photo to zoom in only. Not a photo gallery. Please help.
<img src="images/uploads/phs.jpg"></img>
in my last project, i have used this i hope its help you try this demo:
http://jsfiddle.net/6CR2H/1/
<a href="#" class="pop">
<img src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;" class="img-responsive">
</a>
<a href="#" class="pop">
<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">
</a>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" data-dismiss="modal">
<div class="modal-content" >
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
<div class="modal-footer">
<div class="col-xs-12">
<p class="text-left">1. line of description<br>2. line of description <br>3. line of description</p>
</div>
</div>
</div>
</div>
</div>
javascript code:
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
Related
I'm trying to create a modal but it opens when i´m in the base domain, for example:
The modal opens in the www.example.com
but not open in the
www.example.com/index.php/cart/index and I dont know why
<div id="myModal" class="modal fade">
<div class="modal-dialog" 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>Select your language</h4>
</div>
<!--<section>-->
<div class="modal-body">
<div class="col-md-4">
<img width=128px height=128px src="https://image.flaticon.com/icons/png/128/323/323329.png" alt="" class="img-responsive none" style='object-fit: contain'/>
<p>English</p>
</div>
<div class="col-md-4">
<img width=128px height=128px src="https://image.flaticon.com/icons/png/128/323/323329.png" alt="" class="img-responsive none" style='object-fit: contain'/>
<p>English</p>
</div>
<div class="col-md-4">
<img width=128px height=128px src="https://image.flaticon.com/icons/png/128/323/323329.png" alt="" class="img-responsive none" style='object-fit: contain'/>
<p>English</p>
</div>
<div class="tab_img">
<div class="container" style='height: 100%; width: 100%; object-fit: contain'>
<div class="overlay">
</div>
</a>
</div>
</div>
</div>
</div>
<!--</section>-->
</div>
</div>
</div>
</div>
the script that activate the modal
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>{/literal}
{literal}<script>
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
have you checked in the Routes.php?
$routes->get('/', 'Cart::index');
hope this will solved your problem.
Try to check your base_url() in the config.php.
Probably the problem is that you are not loading the css correctly.
I used vue to populate the item list in my html, and what I want to do, is when the item is clicked, a modal would appear with the data of the clicked item. I'm not using boostrap-vue.
Html:
<div class="row">
<div class="col-lg-4 col-md-6" v-for="items in data" data-toggle="modal" data-target="#exampleModal" user="'items'" click="sendInfo(items)">
<a href="#" class="latest-product__item">
<div class="latest-product__item__pic">
<img src="img/latest-product/lp-1.jpg" alt="">
</div>
<div class="latest-product__item__text">
<h6>{{items.item_name}}</h6>
<div v-for="variant in items.variants">
<div v-for="store in variant.stores">
<span>{{store.default_price}}</span>
</div>
</div>
</div>
</a>
</div>
</div>
Modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<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>
</div>
<div class="modal-body">
<a href="#" class="latest-product__item">
<div class="latest-product__item__pic">
<img src="img/latest-product/lp-1.jpg" alt="">
</div>
<div class="latest-product__item__text">
<h6>{{items}}</h6>
<span>{{items}}</span>
</div>
</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
Vue:
window.onload = function () {
const access_token = "access token here";
new Vue({
el: '#item-data',
data () {
return {
data:[]
}
},
mounted () {
..... API calll .....
},
methonds:{
sendInfo(items) {
this.selectedUser = items;
}
}
})
}
I want to pass the data {{items.item_name}} and {{store.default_price}} to the modal. How do I achieve this?
create a variable for the value you want to pass, a method to handle the event:
data () {
return {
data:[],
passedData:{item_name:null, default_price:null}
},
methods:{
sendInfo(item){
this.passedData = item
}
}
and on the HTML part where you loop through the items:
<div class="col-lg-4 col-md-6" v-for="items in data" data-toggle="modal" data-target="#exampleModal" user="'items'" click="sendInfo(items)">
<div class="latest-product__item__pic">
<img src="img/latest-product/lp-1.jpg" alt="">
</div>
<div class="latest-product__item__text">
<h6>{{items.item_name}}</h6>
<div v-for="variant in items.variants">
<div v-for="store in variant.stores">
<span>{{store.default_price}}</span>
</div>
<a href="#" class="latest-product__item" #click="sendInfo({item_name:items.item_name,default_price:store.default_price})">
Show Modal
</a>
</div>
</div>
</div>
Modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<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>
</div>
<div class="modal-body">
<a href="#" class="latest-product__item">
<div class="latest-product__item__pic">
<img src="img/latest-product/lp-1.jpg" alt="">
</div>
<div class="latest-product__item__text">
<h6>{{passedData.item_name}}</h6>
<span>{{passedData.default_price}}</span>
</div>
</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success btn-block">Add to Cart</button>
</div>
</div>
</div>
</div>
Use common Vue instance for modal and HTML block to access the same data as. Suppose:
<div id='#item-data'>
<div>
//basic Html code
<div>
<div>
//modal code
<div>
<div>
then you can access same vue instance variable in your HTML and modal.
I'm going to assume that your modal markup is somewhere inside the element with the ID 'item-data', and so has access to the data in your Vue instance.
The first thing you need to do is declare selectedUser as a data property, as Vue needs to know about it upfront:
data () {
return {
data:[],
selectedUser: null,
}
},
Next, you need to change your modal markup slightly, so it's referring to the currently selected item (e.g the heading would be {{selectedUser.item_name}} instead of {{items}}).
Lastly, the syntax is wrong where you're attaching a click handler to your item row. Instead of click="sendInfo(items)" it should be #click="sendInfo(items)".
I am trying to get a PDF to show in a bootstrap modal. Although it is appearing and all the modal functionality is working the PDF displays to the right of the modal
I have tried increasing the modal width.
HTML:
<div class='col-3'>
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Application_ccps.pdf</h4>
</div>
<div class="modal-body">
<object width=500 height=575 data="Application_ccps.pdf"></object>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="panel panel-default" id="thepanel">
<div class="panel-heading" id="panelheading">Documents submitted: 5</div>
<div class="panel-body" id="panelbody">
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal">Application_ccps.pdf</button><br>
</div>
</div>
</div>
</div>
CSS:
#thepanel {
width: 300px;
height: 100%;
max-height: 500px;
line-height: 30px;
font-family: Segoe UI;
}
.pdfbutton {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.modal-body {
text-align: center;
}
The expected result is for when the PDF names are clicked a PDF pops up contained within the modal however this does not seem to be the case.
You can simply use iframe instead of the object tag.
<iframe width=500 height=575 src="path_to_your_pdf.pdf"></iframe>
you could create an individual modal for each file, and set different ids for each so you can call them on your buttons
<img src="pdficon.png"> <button class="pdfbutton" data-toggle="modal" data-target="#myModal01">Application_ccps.pdf</button><br>
<div class='col-3'>
<div class="container">
<div class="modal fade" id="myModal01" role="dialog">
...
</div>
</div>
</div>
I have a Modal in my webpage which uses Bootstrap. I've added anchor tags in it to which there are href links. When I am trying to click on that anchor element, it is not clickable. Anchor tag is not working in Modal.
Please help me with this issue.
Please find below code -
<div class="portfolio-modal modal fade" id="editionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="col-sm-3">
<a href="hingoli.html" data-target="#" style="text-decoration: none;">
<div style="padding:15px; color:#181818; text-align: center; ">
<h4>Hingoli</h4>
</div>
<img src="pages/hingoli/1.jpg" style="margin: 0 auto; display: block;" class="modal-img" alt="">
</a>
</div>
<div class="col-sm-3">
<a href="parbhani.html" class="portfolio-link" style="text-decoration: none;">
<div style="padding:15px; color:#181818; text-align: center; ">
<h4>Parbhani</h4>
</div>
<img src="pages/parbhani/1.jpg" style="margin: 0 auto; display: block;" class="modal-img" alt="">
</a>
</div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
I was having the same behaviour with Bootstrap 4 and it turns out that .modal-dialog div has a pointer-events: none; attribute that disables the links. Setting to pointer-events: all; fixed it for me.
try this
$("#yourModalID table tbody").on('click','.yourBtnClass', function(){ //do something here })
Check it, I used clearfix div. but if I don't want clearfix, then I use
(div class="modal-body col-sm-3") because link divs have a float value
but modal-body doesn't.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#editionsModal">Open Modal</button>
<div class="portfolio-modal modal fade" id="editionsModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="col-sm-3">
<a href="hingoli.html" data-target="#" style="text-decoration: none;">
<div style="padding:15px; color:#181818; text-align: center; ">
<h4>Hingoli</h4>
</div>
<img src="pages/hingoli/1.jpg" style="margin: 0 auto; display: block;" class="modal-img" alt="">
</a>
</div>
<div class="col-sm-3">
<a href="parbhani.html" class="portfolio-link" style="text-decoration: none;">
<div style="padding:15px; color:#181818; text-align: center; ">
<h4>Parbhani</h4>
</div>
<img src="pages/parbhani/1.jpg" style="margin: 0 auto; display: block;" class="modal-img" alt="">
</a>
</div>
<div class="clearfix"></div>
<div class="modal-body">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Please try this code!
$('#editionsModal .container a').on('click',function( ev){
var $button=$(ev.target);
ev.preventDefault();
$(this).closest('.modal').on('hidden.bs.modal',function(e){
var $href=$button.attr('href');
window.location.href=$href;
});
});
I am working on laravel 5.0. I am using the bootstrap feature i.e; modal.I just want to add an image in the modal content. I am getting the image but couldn't able to adjust the size of that image.Also,By using css, there is no effect on the image size.
My Code:
#foreach($gallery->images as $image)
<section id="gal" class="col-md-3">
<a class="col-md-3" href="" data-toggle="modal"
data-target="#yourModal{{ $image->id }}">
<img src="{{ url($image->file_path) }}"></a>
</section>
#endforeach
#foreach($gallery->images as $image)
<div class="modal fade" id="yourModal{{ $image->id }}"
tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">×</button>
</div>
<div id="modalimage1" class="modal-body">
<img id="modalimage" src="{{ url($image->file_path) }}">
</div>
<div class="modal-footer">
<div class="row">
<section class="col-md-offset-1 col-md-2">
<img id="jumboimage" src="/src/images/g.jpg"/>
</section>
</div>
</div>
</div>
</div>
</div>
My CSS:
#modalimage{
width:20px;
height:20px;
}
#jumboimage{
width:10px;
height:15px;
}