2014-06-16 94 views
0

我已經在我的網站上實施莊重的彈出位置:http://entrepreneurshipdaily.com/tips/Magnific酒店的彈出不開放的第一次點擊

的目標是每次用戶點擊右側邊欄上的圖像或超鏈接上時打開彈出窗口。我注意到,當您第一次加載頁面並單擊鏈接時,彈出窗口不會打開,而是在地址欄上的URL改爲後綴/#test-form。我需要重新加載頁面以顯示彈出窗口。

如果您在頁面完全加載之前單擊圖像,則可能不會遇到此問題。任何想法是什麼導致這個問題?

代碼:

頁眉:

<link rel="stylesheet" href="http://entrepreneurshipdaily.com/tips/wp-includes/css/magnific-popup.css"> 

頁腳:

<a class="popup-with-form" href="#test-form"><img src="http://entrepreneurshipdaily.com/tips/wp-content/uploads/2014/06/sidebar-cover.png" style="margin-left: 5px; border:none;" /> 

<!-- form itself--> 
<form id="test-form" class="mfp-hide white-popup-block"> 
<div style="border:none;"> 
<h1 style="text-align:center; font-size:24px; font-weight:bold;">Enter Your Email Address To Get Free eBook</h1> 

<div style="width:20%; float:left; padding:2px; "> 
<img src="http://entrepreneurshipdaily.com/tips/wp-content/uploads/2014/06/lightbox-cover.png" style="border:none; width:90%; " /> 
</div> 
<div style="width:80%; float:right; margin-left:10px;"> 
<fieldset style="border:0;"> 

<p style="color:#c0504d; font-weight:bold; text-align:center; font-size:26px; ">"How To Find Your First Customers"</p> 

<!-- Begin MailChimp Signup Form --> 
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css"> 
<style type="text/css"> 
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } 
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block. 
    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ 
</style> 
<div id="mc_embed_signup"> 
<form action="http://entrepreneurshipdaily.us6.list-manage1.com/subscribe/post?u=9e46f33d29448fe10da5e45c7&amp;id=32789775fb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 

<div class="mc-field-group"> 
<label for="mce-EMAIL">Email Address </label> 
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> 
</div> 
<div id="mce-responses" class="clear"> 
<div class="response" id="mce-error-response" style="display:none"></div> 
<div class="response" id="mce-success-response" style="display:none"></div> 
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> 
<div style="position: absolute; left: -5000px;"><input type="text" name="b_9e46f33d29448fe10da5e45c7_32789775fb" tabindex="-1" value=""></div> 
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> 
</form> 
</div> 
<script type="text/javascript"> 
var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email'; 
try { 
var jqueryLoaded=jQuery; 
jqueryLoaded=true; 
} catch(err) { 
var jqueryLoaded=false; 
} 
var head= document.getElementsByTagName('head')[0]; 
if (!jqueryLoaded) { 
var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'; 
head.appendChild(script); 
if (script.readyState && script.onload!==null){ 
    script.onreadystatechange= function() { 
      if (this.readyState == 'complete') mce_preload_check(); 
    }  
} 
} 

var err_style = ''; 
try{ 
err_style = mc_custom_error_style; 
} catch(e){ 
err_style = '#mc_embed_signup input.mce_inline_error{border-color:#6B0505;} #mc_embed_signup div.mce_inline_error{margin: 0 0 1em 0; padding: 5px 10px; background-color:#6B0505; font-weight: bold; z-index: 1; color:#fff;}'; 
} 
var head= document.getElementsByTagName('head')[0]; 
var style= document.createElement('style'); 
style.type= 'text/css'; 
if (style.styleSheet) { 
style.styleSheet.cssText = err_style; 
} else { 
style.appendChild(document.createTextNode(err_style)); 
} 
head.appendChild(style); 
setTimeout('mce_preload_check();', 250); 

var mce_preload_checks = 0; 
function mce_preload_check(){ 
if (mce_preload_checks>40) return; 
mce_preload_checks++; 
try { 
    var jqueryLoaded=jQuery; 
} catch(err) { 
    setTimeout('mce_preload_check();', 250); 
    return; 
} 
var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = 'http://downloads.mailchimp.com/js/jquery.form-n-validate.js'; 
head.appendChild(script); 
try { 
    var validatorLoaded=jQuery("#fake-form").validate({}); 
} catch(err) { 
    setTimeout('mce_preload_check();', 250); 
    return; 
} 
mce_init_form(); 
} 
function mce_init_form(){ 
jQuery(document).ready(function($) { 
    var options = { errorClass: 'mce_inline_error', errorElement: 'div', onkeyup: function(){}, onfocusout:function(){}, onblur:function(){} }; 
    var mce_validator = $("#mc-embedded-subscribe-form").validate(options); 
    $("#mc-embedded-subscribe-form").unbind('submit');//remove the validator so we can get into beforeSubmit on the ajaxform, which then calls the validator 
    options = { url: 'http://entrepreneurshipdaily.us6.list-manage1.com/subscribe/post-json?u=9e46f33d29448fe10da5e45c7&id=32789775fb&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8", 
       beforeSubmit: function(){ 
        $('#mce_tmp_error_msg').remove(); 
        $('.datefield','#mc_embed_signup').each(
         function(){ 
          var txt = 'filled'; 
          var fields = new Array(); 
          var i = 0; 
          $(':text', this).each(
           function(){ 
            fields[i] = this; 
            i++; 
           }); 
          $(':hidden', this).each(
           function(){ 
            var bday = false; 
            if (fields.length == 2){ 
             bday = true; 
             fields[2] = {'value':1970};//trick birthdays into having years 
            } 
            if (fields[0].value=='MM' && fields[1].value=='DD' && (fields[2].value=='YYYY' || (bday && fields[2].value==1970))){ 
             this.value = ''; 
            } else if (fields[0].value=='' && fields[1].value=='' && (fields[2].value=='' || (bday && fields[2].value==1970))){ 
             this.value = ''; 
            } else { 
             if (/\[day\]/.test(fields[0].name)){ 
              this.value = fields[1].value+'/'+fields[0].value+'/'+fields[2].value;           
             } else { 
              this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value; 
             } 
            } 
           }); 
         }); 
        $('.phonefield-us','#mc_embed_signup').each(
         function(){ 
          var fields = new Array(); 
          var i = 0; 
          $(':text', this).each(
           function(){ 
            fields[i] = this; 
            i++; 
           }); 
          $(':hidden', this).each(
           function(){ 
            if (fields[0].value.length != 3 || fields[1].value.length!=3 || fields[2].value.length!=4){ 
             this.value = ''; 
            } else { 
             this.value = 'filled'; 
            } 
           }); 
         }); 
        return mce_validator.form(); 
       }, 
       success: mce_success_cb 
      }; 
    $('#mc-embedded-subscribe-form').ajaxForm(options); 


}); 
} 
function mce_success_cb(resp){ 
$('#mce-success-response').hide(); 
$('#mce-error-response').hide(); 
if (resp.result=="success"){ 
    $('#mce-'+resp.result+'-response').show(); 
    $('#mce-'+resp.result+'-response').html(resp.msg); 
    $('#mc-embedded-subscribe-form').each(function(){ 
     this.reset(); 
    }); 
} else { 
    var index = -1; 
    var msg; 
    try { 
     var parts = resp.msg.split(' - ',2); 
     if (parts[1]==undefined){ 
      msg = resp.msg; 
     } else { 
      i = parseInt(parts[0]); 
      if (i.toString() == parts[0]){ 
       index = parts[0]; 
       msg = parts[1]; 
      } else { 
       index = -1; 
       msg = resp.msg; 
      } 
     } 
    } catch(e){ 
     index = -1; 
     msg = resp.msg; 
    } 
    try{ 
     if (index== -1){ 
      $('#mce-'+resp.result+'-response').show(); 
      $('#mce-'+resp.result+'-response').html(msg);    
     } else { 
      err_id = 'mce_tmp_error_msg'; 
      html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>'; 

      var input_id = '#mc_embed_signup'; 
      var f = $(input_id); 
      if (ftypes[index]=='address'){ 
       input_id = '#mce-'+fnames[index]+'-addr1'; 
       f = $(input_id).parent().parent().get(0); 
      } else if (ftypes[index]=='date'){ 
       input_id = '#mce-'+fnames[index]+'-month'; 
       f = $(input_id).parent().parent().get(0); 
      } else { 
       input_id = '#mce-'+fnames[index]; 
       f = $().parent(input_id).get(0); 
      } 
      if (f){ 
       $(f).append(html); 
       $(input_id).focus(); 
      } else { 
       $('#mce-'+resp.result+'-response').show(); 
       $('#mce-'+resp.result+'-response').html(msg); 
      } 
     } 
    } catch(e){ 
     $('#mce-'+resp.result+'-response').show(); 
     $('#mce-'+resp.result+'-response').html(msg); 
    } 
} 
} 

</script> 
<!--End mc_embed_signup--> 
</fieldset> 
</div> 
</div> 
</form> 

<!-- link that opens popup --> 
<div style="color:#269115; font-weight:bold; text-align: center; line-height: normal; "> 
Click here to grab a free copy of the ebook: <br /> <br />"How To Get Your First Customers" </div></a> 
+0

請張貼您的代碼。 –

+0

對不起。現在添加了。 – Anand

回答

0

看來你的JavaScript代碼缺少DOM已準備就緒功能:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="http://entrepreneurshipdaily.com/tips/wp-includes/js/jquery.magnific-popup.js"></script> 

HTML的身體:

$(document).ready(function() { 

在這個JsFiddle中,它完美的工作。我看到你在你的代碼中添加了兩個jquery庫,一個是嵌入的,另一個是由javascript添加的自動添加。

https://jsfiddle.net/netvicious/vygrgtef/

相關問題