英文:
How to only load iframe when link is clicked
问题
Sure, here is the translated portion:
我只想在点击 a 标签链接时显示 iframe 弹出窗口。
这是我的 HTML 和 JS 代码。
当我点击 a 标签链接时什么都不会发生。
不确定原因，有任何想法吗？我已经更新了我的 JS 脚本，但它仍然无法正常工作，弹出窗口在点击 a 链接时不会出现。
function showPopup() {
var popup = document.getElementById("popup");
popup.style.display = "block";
}
var link = document.querySelector('.funnel_button');
link.addEventListener('click', function(event) {
event.preventDefault(); // 阻止默认链接行为
showPopup();
});
#popup {
display: none;
width: 100%;
height: 100%;
border: none;
border-radius: 4px;
}
<ul>
<li>
<a class="funnel_button" href="#" onclick="showPopup()">Photos</a>
</li>
</ul>
<iframe src="#" style="display:none;width:100%;height:100%;border:none;border-radius:4px" id="popup" data-layout="{'id':'POPUP'}" data-trigger-type="alwaysShow" data-trigger-value="" data-activation-type="alwaysActivated" data-activation-value="" data-deactivation-type="neverDeactivate" data-deactivation-value="" data-form-name="NAME" data-height="423" data-layout-iframe-id="popup-" data-form-id="13D" title="NAME"></iframe>
Please note that I've translated the code portions, and you can use them as needed.
英文:
I want to only show the iframe popup when the a class link is clicked.
here is my html and JS
It does nothing when I click the aclass link
not sure why, any idea? I added Updated my JS script but it's still not working correctly, popup doesn't appear when alink is clicked
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function showPopup() {
var popup = document.getElementById("popup");
popup.style.display = "block";
}
var link = document.querySelector('.funnel_button');
link.addEventListener('click', function(event) {
event.preventDefault(); // Prevents the default link behavior
showPopup();
});
<!-- language: lang-css -->
#popup {
display: none;
width: 100%;
height: 100%;
border: none;
border-radius: 4px;
}
<!-- language: lang-html -->
<ul>
<li>
<a class="funnel_button" href="#" onclick="showPopup()">Photos</a>
</li>
</ul>
<iframe src="#" style="display:none;width:100%;height:100%;border:none;border-radius:4px" id="popup" data-layout="{'id':'POPUP'}" data-trigger-type="alwaysShow" data-trigger-value="" data-activation-type="alwaysActivated" data-activation-value="" data-deactivation-type="neverDeactivate"
data-deactivation-value="" data-form-name="NAME" data-height="423" data-layout-iframe-id="popup-" data-form-id="13D" title="NAME">
</iframe>
<!-- end snippet -->
答案1
得分: 1
以下是您要翻译的内容：
"Just use classes and it will work. Sample border and colors just for this site.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function showPopup() {
const popup = document.getElementById("popup");
popup.src = 'www.example.com'; //does not work in stack overflow for security reasons.
popup.classList.add("showme");
}
const link = document.querySelector('.funnel_button');
link.addEventListener('click', function(event) {
event.preventDefault(); // Prevents the default link behavior
showPopup();
});
<!-- language: lang-css -->
#popup {
display: none;
width: 100%;
height: 100%;
border: none;
border-radius: 4px;
}
#popup.showme {
display: block;
border: solid 1px red;
background-color: #FFFF0033;
}
<!-- language: lang-html -->
<ul>
<li>
<a class="funnel_button" href="#">Photos</a>
</li>
</ul>
<iframe src="#" id="popup" data-layout="{'id':'POPUP'}" data-trigger-type="alwaysShow" data-trigger-value="" data-activation-type="alwaysActivated" data-activation-value="" data-deactivation-type="neverDeactivate" data-deactivation-value="" data-form-name="NAME"
data-height="423" data-layout-iframe-id="popup-" data-form-id="13D" title="NAME">
</iframe>
<!-- end snippet -->
请注意，代码部分不被翻译。
英文:
Just use classes and it will work. Sample border and colors just for this site.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function showPopup() {
const popup = document.getElementById("popup");
popup.src = 'www.example.com'; //does not work in stack overflow for security reasons.
popup.classList.add("showme");
}
const link = document.querySelector('.funnel_button');
link.addEventListener('click', function(event) {
event.preventDefault(); // Prevents the default link behavior
showPopup();
});
<!-- language: lang-css -->
#popup {
display: none;
width: 100%;
height: 100%;
border: none;
border-radius: 4px;
}
#popup.showme {
display: block;
border: solid 1px red;
background-color: #FFFF0033;
}
<!-- language: lang-html -->
<ul>
<li>
<a class="funnel_button" href="#">Photos</a>
</li>
</ul>
<iframe src="#" id="popup" data-layout="{'id':'POPUP'}" data-trigger-type="alwaysShow" data-trigger-value="" data-activation-type="alwaysActivated" data-activation-value="" data-deactivation-type="neverDeactivate" data-deactivation-value="" data-form-name="NAME"
data-height="423" data-layout-iframe-id="popup-" data-form-id="13D" title="NAME">
</iframe>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论