Javascript Clickable图标而不是弹出窗口

时间:2014-12-06 12:41:26

标签: javascript jquery

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

<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>

帮我解决这个问题。 提前致谢

1 个答案:

答案 0 :(得分:0)

使用click()来执行此操作或使用.on(&#39;点击&#39;)..这样将您的课程更改为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;}'
            }
        });
    });
    });