只有在链接被点击时加载 iframe。

huangapple
go评论101阅读模式
英文:

How to only load iframe when link is clicked

问题

Sure, here is the translated portion:

我只想在点击 a 标签链接时显示 iframe 弹出窗口。

这是我的 HTML 和 JS 代码。

当我点击 a 标签链接时什么都不会发生。

不确定原因，有任何想法吗？我已经更新了我的 JS 脚本，但它仍然无法正常工作，弹出窗口在点击 a 链接时不会出现。

  1. function showPopup() {
  2.   var popup = document.getElementById("popup");
  3.   popup.style.display = "block";
  4. }
  6. var link = document.querySelector('.funnel_button');
  7. link.addEventListener('click', function(event) {
  8.   event.preventDefault(); // 阻止默认链接行为
  9.   showPopup();
  10. });
  1. #popup {
  2.   display: none;
  3.   width: 100%;
  4.   height: 100%;
  5.   border: none;
  6.   border-radius: 4px;
  7. }
  1. <ul>
  2.   <li>
  3.     <a class="funnel_button" href="#" onclick="showPopup()">Photos</a>
  4.   </li>
  5. </ul>
  6. <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 -->

  1. function showPopup() {
  2.   var popup = document.getElementById(&quot;popup&quot;);
  3.   popup.style.display = &quot;block&quot;;
  4. }
  6. var link = document.querySelector(&#39;.funnel_button&#39;);
  7. link.addEventListener(&#39;click&#39;, function(event) {
  8.   event.preventDefault(); // Prevents the default link behavior
  9.   showPopup();
  10. });

<!-- language: lang-css -->

  1. #popup {
  2.   display: none;
  3.   width: 100%;
  4.   height: 100%;
  5.   border: none;
  6.   border-radius: 4px;
  7. }

<!-- language: lang-html -->

  1. &lt;ul&gt;
  2.   &lt;li&gt;
  3.     &lt;a class=&quot;funnel_button&quot; href=&quot;#&quot; onclick=&quot;showPopup()&quot;&gt;Photos&lt;/a&gt;
  4.   &lt;/li&gt;
  5. &lt;/ul&gt;
  6. &lt;iframe src=&quot;#&quot; style=&quot;display:none;width:100%;height:100%;border:none;border-radius:4px&quot; id=&quot;popup&quot; data-layout=&quot;{&#39;id&#39;:&#39;POPUP&#39;}&quot; data-trigger-type=&quot;alwaysShow&quot; data-trigger-value=&quot;&quot; data-activation-type=&quot;alwaysActivated&quot; data-activation-value=&quot;&quot; data-deactivation-type=&quot;neverDeactivate&quot;
  7.   data-deactivation-value=&quot;&quot; data-form-name=&quot;NAME&quot; data-height=&quot;423&quot; data-layout-iframe-id=&quot;popup-&quot; data-form-id=&quot;13D&quot; title=&quot;NAME&quot;&gt;
  8. &lt;/iframe&gt;

<!-- end snippet -->

答案1

得分: 1

以下是您要翻译的内容：

"Just use classes and it will work. Sample border and colors just for this site.

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-js -->
  4. function showPopup() {
  5.   const popup = document.getElementById("popup");
  6.   popup.src = 'www.example.com'; //does not work in stack overflow for security reasons.
  7.   popup.classList.add("showme");
  8. }
  10. const link = document.querySelector('.funnel_button');
  11. link.addEventListener('click', function(event) {
  12.   event.preventDefault(); // Prevents the default link behavior
  13.   showPopup();
  14. });
  16. <!-- language: lang-css -->
  17. #popup {
  18.   display: none;
  19.   width: 100%;
  20.   height: 100%;
  21.   border: none;
  22.   border-radius: 4px;
  23. }
  25. #popup.showme {
  26.   display: block;
  27.   border: solid 1px red;
  28.   background-color: #FFFF0033;
  29. }
  31. <!-- language: lang-html -->
  32. <ul>
  33.   <li>
  34.     <a class="funnel_button" href="#">Photos</a>
  35.   </li>
  36. </ul>
  37. <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"
  38.   data-height="423" data-layout-iframe-id="popup-" data-form-id="13D" title="NAME">
  40. </iframe>
  42. <!-- 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 -->

  1. function showPopup() {
  2.   const popup = document.getElementById(&quot;popup&quot;);
  3.   popup.src = &#39;www.example.com&#39;; //does not work in stack overflow for security reasons.
  4.   popup.classList.add(&quot;showme&quot;);
  5. }
  7. const link = document.querySelector(&#39;.funnel_button&#39;);
  8. link.addEventListener(&#39;click&#39;, function(event) {
  9.   event.preventDefault(); // Prevents the default link behavior
  10.   showPopup();
  11. });

<!-- language: lang-css -->

  1. #popup {
  2.   display: none;
  3.   width: 100%;
  4.   height: 100%;
  5.   border: none;
  6.   border-radius: 4px;
  7. }
  9. #popup.showme {
  10.   display: block;
  11.   border: solid 1px red;
  12.   background-color: #FFFF0033;
  13. }

<!-- language: lang-html -->

  1. &lt;ul&gt;
  2.   &lt;li&gt;
  3.     &lt;a class=&quot;funnel_button&quot; href=&quot;#&quot;&gt;Photos&lt;/a&gt;
  4.   &lt;/li&gt;
  5. &lt;/ul&gt;
  6. &lt;iframe src=&quot;#&quot; id=&quot;popup&quot; data-layout=&quot;{&#39;id&#39;:&#39;POPUP&#39;}&quot; data-trigger-type=&quot;alwaysShow&quot; data-trigger-value=&quot;&quot; data-activation-type=&quot;alwaysActivated&quot; data-activation-value=&quot;&quot; data-deactivation-type=&quot;neverDeactivate&quot; data-deactivation-value=&quot;&quot; data-form-name=&quot;NAME&quot;
  7.   data-height=&quot;423&quot; data-layout-iframe-id=&quot;popup-&quot; data-form-id=&quot;13D&quot; title=&quot;NAME&quot;&gt;
  9. &lt;/iframe&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月15日 05:37:59
  • 转载请务必保留本文链接：https://go.coder-hub.com/76477715.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定