javascript 可单击图标而不是弹出窗口

Javascript Clickable Icon Instead of Pop Up

本文关键字:窗口 单击 图标 javascript      更新时间:2023-09-26

先生,美好的一天。帮我解决这个问题。当我打开页面时,此代码会自动弹出。如何将其转换为可点击而不是自动弹出。

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js">   </script>
    <script type="text/javascript">
    KlaviyoSubscribe.attachModalSignUp({
        list: 'g9cZtX',
        delay_seconds: 0.5,
        content: {
            clazz: ' klaviyo_modal_g9cZtX',
            header: "Interested in our Newsletter?",
            subheader: "Stay in the know with news and promotions.",
            button: "Subscribe",
            success: "Thanks! Check your email for a confirmation.",
            styles: '.klaviyo_modal.klaviyo_modal_g9cZtX {  font-family: "Helvetica Neue", Arial}.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_header {  color:#222;}.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_subheader {  color:#222;}.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_submit_button,.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_submit_button span {  background-color:#07234F;  background-image: none;   border-radius: 2px;}.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_submit_button:hover,.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_submit_button span:hover {  background-color:#2A4D85;  background-image: none; }.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_inner,.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_fieldset .klaviyo_field_group input[type=text],.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_fieldset .klaviyo_field_group input[type=email] {  border-radius: 2px;}'
        }
    });

这是可点击的图标

<li><a href="#"><i class="icon-envelope icon-2x"></i></a></li>

帮助我弄清楚这一点。提前致谢

使用 click() 来执行此操作或使用 .on('click') .. 像这样将您的类更改为 icon_png 而不是 icon.png

$(document).ready(function(){
   $('.icon_png').on('click',function(){
     KlaviyoSubscribe.attachModalSignUp({
            list: 'g9cZtX',
            delay_seconds: 0.5,
            content: {
                clazz: ' klaviyo_modal_g9cZtX',
                header: "Interested in our Newsletter?",
                subheader: "Stay in the know with news and promotions.",
                button: "Subscribe",
                success: "Thanks! Check your email for a confirmation.",
                styles: '.klaviyo_modal.klaviyo_modal_g9cZtX {  font-family: "Helvetica Neue", Arial}.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_header {  color:#222;}.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_subheader {  color:#222;}.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_submit_button,.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_submit_button span {  background-color:#07234F;  background-image: none;   border-radius: 2px;}.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_submit_button:hover,.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_submit_button span:hover {  background-color:#2A4D85;  background-image: none; }.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_inner,.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_fieldset .klaviyo_field_group input[type=text],.klaviyo_modal.klaviyo_modal_g9cZtX .klaviyo_fieldset .klaviyo_field_group input[type=email] {  border-radius: 2px;}'
            }
        });
    });
    });