gpt4 book ai didi

javascript - HTML 和 CSS 以及 Javascript 自定义提示

转载 作者:太空宇宙 更新时间:2023-11-04 09:30:36 25 4
gpt4 key购买 nike

您好,我正在为我的网站开发一个所见即所得的编辑器。

我希望能够将图像插入到标准提示中并且效果很好。我想要一个在屏幕中间打开的自定义提示,而不是默认的浏览器提示。

在 stackoverflow 上,如果您单击图像按钮或插入链接按钮,它会创建一个自定义提示以供您插入数据。

这是怎么做到的?它甚至是提示吗?

最佳答案

这可能行得通。现在不需要 javaScript

<div class="Background">
<img class="CenterImg" "image folder here"> </img>
</div>

and CSS

.Background{
position: fixed;
top:0;
left:0;
bottom:0;
right:0; // this is optional since we are using width:100%;
width: 100%;

background-color: #fff;
}

.CenterImg{
Padding: 10px; // top left right bottom to 10px from the corner

width: 200px;
height: 200px;
}
.CenterImg:active{

-webkit-transition: width 2s; /* Safari */
transition: width 2s;

width: 80%;
height: 80%;
}

但是,如果那不起作用。这是 javascript:

<!DOCTYPE html>
<html>
<head>
<style>
#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_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200">

<!-- 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 - HTML 和 CSS 以及 Javascript 自定义提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40828621/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com