当我点击图片时，如何获得小对话框或类似聊天的框

Question

我有一个小网页。我的要求是，我想在网页的右下角放置一张图片，当我点击该图片时，它应该打开一个网站，甚至在该页面中打开一个小对话框或类似聊天的框。不应使用Iframe。我想用脚本标记(脚本嵌入(来做这件事。有人能帮我查密码吗。

这是我的图像 HTML代码

<div class="corner">
<img src="images/Happiest_Minds_New_Logo.jpg" alt="" class="right-corner" width="100px" height="70px">
</div>

这是图像的css

.right-corner {
position:fixed;
bottom: 5px;
right:0px;
}

Answer 1

您可以使用自定义属性(如数据href(来存储链接，然后使用window.location.href来设置url(使用window.open方法在新选项卡中打开链接(

参见示例=>

HTML

<div class="corner">
<img data-href="https://example.com" src="images/Happiest_Minds_New_Logo.jpg" alt="" class="right-corner" width="100px" height="70px">
</div>

JS

// selecting all elements with data-href attribute
const hrefs =  document.querySelectorAll('[data-href]')

// adding click event Listener
hrefs.forEach(linkedItem =>{
linkedItem.onclick = function (e){
// custom code to run on event
window.location.href =   e.target.getAttribute("data-href")
}
})

Answer 2

popupWhatsApp = () => {

let btnClosePopup = document.querySelector('.closePopup');
let btnOpenPopup = document.querySelector('.whatsapp-button');
let popup = document.querySelector('.popup-whatsapp');
let sendBtn = document.getElementById('send-btn');
btnClosePopup.addEventListener("click",  () => {
popup.classList.toggle('is-active-whatsapp-popup')
})

btnOpenPopup.addEventListener("click",  () => {
popup.classList.toggle('is-active-whatsapp-popup')
popup.style.animation = "fadeIn .6s 0.0s both";
})

sendBtn.addEventListener("click", () => {
let msg = document.getElementById('whats-in').value;
let relmsg = msg.replace(/ /g,"%20");
//just change the numbers "1515551234567" for your number. Don't use +001-(555)1234567     
window.open('https://wa.me/15551234567?text='+relmsg, '_blank'); 

});
setTimeout(() => {
popup.classList.toggle('is-active-whatsapp-popup');
}, 3000);
}
popupWhatsApp();

@keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
opacity: 0.3;
}
100% {
transform: scale(1.45);
opacity: 0;
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}
.nav-bottom {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
width: auto;
height: auto;
position: fixed;
z-index: 8;
bottom: 0px;
right: 0px;
padding: 5px;
margin: 0px;
}
@media (max-width: 360px) {
.nav-bottom {
width: 320px;
}
}
.whatsapp-button {
display: flex;
justify-content: center;
align-content: center;
width: 60px;
height: 60px;
z-index: 8;
transition: 0.3s;
margin: 10px;
padding: 7px;
border: none;
outline: none;
cursor: pointer;
border-radius: 50%;
background-color: white;
/* offset-x > | offset-y ^| blur-radius | spread-radius | color */
-webkit-box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
-moz-box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
box-shadow: 1px 1px 6px 0px rgba(68, 68, 68, 0.705);
}
.circle-anime {
display: flex;
position: absolute;
justify-content: center;
align-content: center;
width: 60px;
height: 60px;
top: 15px;
right: 15px;
border-radius: 50%;
transition: 0.3s;
background-color: #77bb4a;
animation: pulse 1.2s 4s ease 4;
}
.popup-whatsapp {
display: none;
position: absolute;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
width: auto;
height: auto;
padding: 10px;
bottom: 85px;
right: 6px;
transition: 0.5s;
border-radius: 10px;
background-color: white;
/* offset-x > | offset-y ^| blur-radius | spread-radius | color */
-webkit-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
-moz-box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
box-shadow: 2px 1px 6px 0px rgba(68, 68, 68, 0.705);
animation: slideInRight 0.6s 0s both;
}
.popup-whatsapp>div {
margin: 5px;
}
@media (max-width: 680px) {
.popup-whatsapp p {
font-size: 0.9em;
}
}
.popup-whatsapp>.content-whatsapp.-top {
display: flex;
flex-direction: column;
}
.popup-whatsapp>.content-whatsapp.-top p {
color: #585858;
font-family: "Roboto";
font-weight: 400;
font-size: 1em;
}
.popup-whatsapp>.content-whatsapp.-bottom {
display: flex;
flex-direction: row;
}
.closePopup {
display: flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
margin: 0px 0px 15px 0px;
border-radius: 50%;
border: none;
outline: none;
cursor: pointer;
background-color: #f76060;
-webkit-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
-moz-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
}
.closePopup:hover {
background-color: #f71d1d;
transition: 0.3s;
}
.send-msPopup {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #ffffff;
margin: 0px 0px 0px 5px;
border: none;
outline: none;
cursor: pointer;
-webkit-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
-moz-box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
box-shadow: 1px 1px 2px 0px rgba(68, 68, 68, 0.705);
}
.send-msPopup:hover {
background-color: #f8f8f8;
transition: 0.3s;
}
.is-active-whatsapp-popup {
display: flex;
animation: slideInRight 0.6s 0s both;
}
input.whats-input[type=text] {
width: 250px;
height: 40px;
box-sizing: border-box;
border: 0px solid #ffffff;
border-radius: 20px;
font-size: 1em;
background-color: #ffffff;
padding: 0px 0px 0px 10px;
-webkit-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
outline: none;
transition: 0.3s;
}
@media (max-width: 420px) {
input.whats-input[type=text] {
width: 225px;
}
}
input.whats-input::placeholder {
/* Most modern browsers support this now. */
color: rgba(68, 68, 68, 0.705);
opacity: 1;
}
input.whats-input[type=text]:focus {
background-color: #f8f8f8;
-webkit-transition: width 0.3s ease-in-out;
transition: width 0.3s ease-in-out;
transition: 0.3s;
}
.icon-whatsapp-small {
width: 24px;
height: 24px;
}
.icon-whatsapp {
width: 45px;
height: 45px;
}
.icon-font-color {
color: #ffffff;
}
.icon-font-color--black {
color: #333333;
}

<div class="nav-bottom">
<div class="popup-whatsapp fadeIn">
<div class="content-whatsapp -top"><button type="button" class="closePopup">
<i class="material-icons icon-font-color">close</i>
</button>
<p>Hello, 😊 need help?</p>
</div>
<div class="content-whatsapp -bottom">
<input class="whats-input" id="whats-in" type="text" Placeholder="Send message..." />
<button class="send-msPopup" id="send-btn" type="button">
<i class="material-icons icon-font-color--black">send</i>
</button>
</div>
</div>
<button type="button" id="whats-openPopup" class="whatsapp-button">
<img class="icon-whatsapp" src="https://image.flaticon.com/icons/svg/134/134937.svg">
</button>
<div class="circle-anime"></div>
</div>

Answer 3

最简单的解决方案(不可自定义(是警报、确认或提示：

<div class="corner">
<img src="images/Happiest_Minds_New_Logo.jpg" alt="" class="right-corner" width="100px" height="70px" onclick="alert('hi')">
</div>
<div class="corner">
<img src="images/Happiest_Minds_New_Logo.jpg" alt="" class="right-corner" width="100px" height="70px" onclick="confirm('are you sure?')">
</div>
<div class="corner">
<img src="images/Happiest_Minds_New_Logo.jpg" alt="" class="right-corner" width="100px" height="70px" onclick="prompt('enter your name', 'default name')">
</div>