這段代碼是我發現的，但這不適用于角度。我們可以在角度實作相同的功能嗎？或者我們可以使用純 CSS 來做到這一點。我將分享下面的代碼
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
這段代碼使用的是 javascript，但我想用 angular 來實作。所以有沒有其他方法可以在單擊時以角度實作彈出影像??。我們可以使用純CSS來實作彈出影像??嗎？或者是否有任何角度方法可以做到這一點。
uj5u.com熱心網友回復：
我認為您可以使用材料對話框https://material.angular.io/cdk/dialog/overview的 CDK 對話框
您可以更改樣式，使其沒有粗邊框，也沒有邊距/填充。然后，您可以使用對話框的整個空間顯示您的影像。
如果您希望您甚至不需要組件來顯示影像，因為您可以使用 ng-template 并在打開對話框時將模板作為輸入傳遞
編輯：這里是一個代碼示例
<h1> here your html code </h1>
// this is the small image and is clickable
<img src="img_snow.jpg" width="200" height="150" (click)="openDialog(myTemplate)">
// this template is invisible. It will be shown in the popup
<ng-template #myTemplate>
<h2>here your img or whatever you want</h2>
// this is your big popup image. Style it as you wish
<img src="img_snow.jpg" style="height:100%; width:100%">
<button (click)="myDialogRef?.close()">this close button is optional</button>
</ng-template>
你的 ts 檔案
constructor(private dialog: Dialog) { }
myDialogRef: DialogRef<unknown, any>;
openDialog(template: TemplateRef<unknown>) {
// you can pass additional params, choose the size and much more
this.myDialogRef = this.dialog.open(template);
}
更多定制請查看 CDK Dialog 檔案
uj5u.com熱心網友回復：
使用 Angular 材質 UI 庫。
https://material.angular.io/components/dialog/overview
它提供了一種可注入機制，您可以使用自定義組件和引數呼叫該機制。自定義組件將顯示在對話框內。
const ref = this.dialog.open(MyDialogContentComponent, {
width: '250px',
data: {foo: 'bar'},
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/510203.html
標籤：css有角度的