Is it possible to make this chili img to a "a href". The function of the pop up is working fine, but there is no "hand", when you hover the picture.
Link to my portfolio
HTML
<img
src="/images/thumbs/image1.jpg"
data-toggle="modal"
data-target="#myModal1"
alt="Trolltunga, Norway"
width="300px"
height="200px"
>
<div id="myModal1" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<img src="//placehold.it/1000x600" class="img-responsive">
</div>
</div>
</div>
</div>
JS
function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;
// Center modal vertically in window
$dialog.css("margin-top", offset);
}
$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});
img:hover{
cursor: pointer;
}
Add this to your css
You could add this,
img{
cursor:pointer;
}
cursor:pointer indicates that as link. But actually in your codes there is no <a> tag around your image so you can change your cursor property.
Simple use this code in your css.
img:hover{
cursor: pointer;
}
Related
I would like to add an image to my website like in this example -> Cropped image
How do I crop the image? If i am using a .png image, i'm still seeing the black/white background. Is there a way to have only the man without the background using HTML & CSS?
Here is an easy way to crop any image before uploading. https://codepen.io/githyoung/pen/LYEjwdO
// Start upload preview image
$(".gambar").attr("src", "https://user.gadjian.com/static/images/personnel_boy.png");
var $uploadCrop,
tempFilename,
rawImg,
imageId;
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('.upload-demo').addClass('ready');
$('#cropImagePop').modal('show');
rawImg = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
else {
swal("Sorry - you're browser doesn't support the FileReader API");
}
}
$uploadCrop = $('#upload-demo').croppie({
viewport: {
width: 150,
height: 200,
},
enforceBoundary: false,
enableExif: true
});
$('#cropImagePop').on('shown.bs.modal', function(){
// alert('Shown pop');
$uploadCrop.croppie('bind', {
url: rawImg
}).then(function(){
console.log('jQuery bind complete');
});
});
$('.item-img').on('change', function () { imageId = $(this).data('id'); tempFilename = $(this).val();
$('#cancelCropBtn').data('id', imageId); readFile(this); });
$('#cropImageBtn').on('click', function (ev) {
$uploadCrop.croppie('result', {
type: 'base64',
format: 'jpeg',
size: {width: 150, height: 200}
}).then(function (resp) {
$('#item-img-output').attr('src', resp);
$('#cropImagePop').modal('hide');
});
});
// End upload preview image
label.cabinet{
display: block;
cursor: pointer;
}
label.cabinet input.file{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
margin-top:-30px;
}
#upload-demo{
width: 250px;
height: 250px;
padding-bottom:25px;
}
<div class="container">
<div class="row">
<div class="col-xs-12">
<label class="cabinet center-block">
<figure>
<img src="" class="gambar img-responsive img-thumbnail" id="item-img-output" />
<figcaption><i class="fa fa-camera"></i></figcaption>
</figure>
<input type="file" class="item-img file center-block" name="file_photo"/>
</label>
</div>
</div>
</div>
<div class="modal fade" id="cropImagePop" 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">
<?=multiLanguage( "Edit Foto" , "Edit Photo" )?></h4>
</div>
<div class="modal-body">
<div id="upload-demo" class="center-block"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="cropImageBtn" class="btn btn-primary">Crop</button>
</div>
</div>
</div>
</div>
If I understood correctly, you want to use a picture without any background.
for this, you should use a transparent png like this:
body{
background:lightblue
}
<img src="https://sb.kaleidousercontent.com/67418/800x533/9e7eebd2c6/animals-0b6addc448f4ace0792ba4023cf06ede8efa67b15e748796ef7765ddeb45a6fb-removebg.png" width="500"/>
And if you want to add your voluntary color to the picture background like your sample:
img{
background: linear-gradient(45deg, #cb2d2d, #172aec);
}
body{
background:lightblue;
}
<img src="https://sb.kaleidousercontent.com/67418/800x533/9e7eebd2c6/animals-0b6addc448f4ace0792ba4023cf06ede8efa67b15e748796ef7765ddeb45a6fb-removebg.png" width="500"/>
But if your picture isn't transparent, I think you must make it transparent on photoshop at first.
To my knowledge, there isn't a way of doing this through CSS or HTML. There is no inbuilt function to do this. So the only way to achieve this is by removing the background of the image by a third-party service like remove.bg or apps like photoshop etc.. (preferred to use Adobe Photoshop and use the pen tool, Magic wand tool or Quick selection tools for removing the external background of the image.) and then downloading it as a png and then uploading to your website.
Here I will mention some usefull softwares and websites for removing backgrounds, which are top rated and which maintains the quality of your image.
Adobe Photoshop
Canva
PhotoScissors
Wondershare PixCut
HitPaw Online Background Remover
Remove.bg
Once you get the png image, you can directly put it into your website. If you still see some white background altering over the image, use background-color: transparent.
I have three popups that appear when the page loads, and only the first one is displayed while the rest is hidden. Each popup contains an image.
<div class="popup-container" tabindex="0">
<div class="popup-wrapper"> //1st popup
<img src="/popup/image-1.jpg" alt="photo">
</div>
<div class="popup-wrapper"> //2nd popup
<img src="/popup/image-2.jpg" alt="photo">
</div>
<div class="popup-wrapper"> //3rd popup
<img src="/popup/image-3.jpg" alt="photo">
</div>
</div>
The 2nd and 3rd popups have a display set to none via css.
.popup-wrapper:nth-child(n+2) {
display: none;
}
My question is how can I show the second popup after closing the first one, and so on from the second popup to third using ESC key.
So far here's my jquery:
$(".popup-container").on("keydown", function(e) {
if(e.which == 27) {
$(".popup-container .popup-wrapper").hide(); //closes the currently shown popup
}
});
You can use next and show since they are siblings.
$(".popup-container").on("keydown", function(e) {
if (e.which == 27) {
$(".popup-container .popup-wrapper:visible")
.hide()
.next()
.show();
}
});
.popup-wrapper:nth-child(n+2) {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popup-container" tabindex="0">
<div class="popup-wrapper"> //1st popup
<img src="/popup/image-1.jpg" alt="photo">
</div>
<div class="popup-wrapper"> //2nd popup
<img src="/popup/image-2.jpg" alt="photo">
</div>
<div class="popup-wrapper"> //3rd popup
<img src="/popup/image-3.jpg" alt="photo">
</div>
</div>
I have an angular material 2 date-picker implemented in a bootstrap modal form:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
<div class="timeline-cal">
<input class="date-field" [mdDatepicker]="picker" placeholder="Choose a date">
<md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle>
<md-datepicker #picker></md-datepicker>
</div>
<div class="modal-footer">
<button type="button" class="btn grey-btn pull-right" (click)="cancel()">Cancel</button>
</div>
</div>
</div>
However, upon clicking the button, the datepicker wouldn't open in the modal dialog itself but opens in the background. I tried this but didn't help:
.mat-datepicker-content{ z-index: 1200}
try,
::ng-deep .cdk-overlay-container {
z-index: 1200 !important;
}
Or this
/deep/ .cdk-overlay-container {
z-index: 1200 !important;
}
For me this worked:
::ng-deep .cdk-overlay-container {
position: fixed !important;
z-index: 100000 !important; /* set value you need */
}
You have to specify certain position for z-index.
Note: z-index only works on positioned elements (position:absolute,
position:relative, or position:fixed).
CSS z-index # W3Schools
Add this code in the component html file :
<style>
::ng-deep .cdk-overlay-container {
z-index: 2000;
</style>
Hope fully this will resolve the issue !!!
I am going to make this short, so it's easy to understand.
This is the scenario:
I am having opacity in the menu (this works)
I am trying to remove the opacity from the popup (last li, #myModal) (this does not work)
Some of the html in the header:
<div id="header_menu">
<label for="show-menu" class="show-menu"><img src=<?php bloginfo('stylesheet_directory'); ?>/img/ikoner/innbokskontroll_nav_menu.png height="15px"></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>referanser</li>
<li>blogg</li>
<li class="popupp">bestill foredrag!
<div id="myModal" class="modal fade" 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>
</div><!-- End of Modal body -->
</div><!-- End of Modal content -->
</div><!-- End of Modal dialog -->
</div>
</li>
</ul>
</div>
I am sorry if this is a messy HTML. I tried to make it simple to understand here on SO.
The currently CSS which adds opacity to the menu is the following:
#header_menu {
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
To remove the opacity I have tried the following, but it does not work:
#myModal {
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.modal-content, .modal-dialog {
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
text-align: left;
}
li.popupp {
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Could you please help me to find the solution?
Instead of using opacity try to use rgba like below.
#header_menu
{
background-color:rgba(0,0,0,0.7);
}
So this will not affect any child elements. So wherever you want opacity you can use it like above. The only thing you need to give it rgb format.
I want to remove the footer from my modal. But it is only removing the contents and not the space acquired by it.
Here is my code...
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
</div>
If you don't use '<div class="modal-footer">' in your modal template then bootstrap will made it for you. I think this is why you see the footer with your code.
My solution is hidding the footer in the template (last line) :
<div class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer" style="display:none"></div>
</div>
Try this
<div class="modal-footer" hidden="true"></div>
I'm pretty sure the "extra space" is the <p> margin. Try this css :
.modal .modal-body p {
margin-bottom: 0;
}
I think its because of the padding given to modal-footer class. Try overriding it
.modal .modal-footer {
padding: 4px;
}
I have kept it as 4px to preserve round corners
You can override modal-header, modal-footer of the bootstrap modal.
Add the following code.
.modal-footer{display: none;}
This can be achievable using jQuery
require(
[
'jquery',
'Magento_Ui/js/modal/modal'
],
function(
$,
modal
) {
var options = {
type: 'popup',
responsive: true,
innerScroll: true,
buttons: []
};
$('#approvalsModal').modal(options,{
closed: function(){
// Do some action when modal closed
}
});
$(".approvalsModal").click(function(){
$("#approvalsModal").modal('openModal');
});
}
);