StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POLaunch Mailchimp evil popup onclick
primarykey
Id
20430446
data
AcceptedAnswerId
31751424
AnswerCount
5
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2013-12-06T17:55:25.180
FavoriteCount
2
LastActivityDate
2018-08-29T16:25:36.307
LastEditDate
2013-12-06T18:03:53.807
LastEditorUserId
824344
OwnerUserId
824344
ParentId
0
PostTypeId
1
Score
9
ViewCount
9149
LastEditorDisplayName
text
Body
<p><strong>Styling</strong></p> <pre><code><link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.8);display:none;z-index:10000; } #mc_embed_signup form{position:fixed; top:10%; left:50%; width:50%; margin-left:-25%; font:normal 100% Helvetica,Arial,sans-serif; font-size:14px; border-radius:4px; border:none; padding:10px 20px; background-color:#fff; color:#000; text-align:left;max-height:400px;overflow-y:auto;overflow-x:hidden;} #mc_embed_signup a.mc_embed_close{background:transparent url(http://downloads.mailchimp.com/img/closebox.png) no-repeat; display:block; height:30px; width:30px; text-indent:-999em; position:absolute; top:-10px; right:-10px; display:none; } /* 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> </code></pre> <p><strong>HTML</strong></p> <pre><code><div id="mc_embed_signup"> <form action="http://zehava.us3.list-manage2.com/subscribe/post?u=fc807e12a60c9cbaaf5f5616e&amp;id=0707dfe742" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <h2>We want to share with you the newest ZEHAVA creations! Leave us your email address! With this occasion, ZEHAVA offers you a gift: a free recondition of your favorite jewelry.</h2> <div class="indicates-required"><span class="asterisk">*</span> indicates required</div> <div class="mc-field-group"> <label for="mce-EMAIL">Email Address <span class="asterisk">*</span> </label> <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> </div> <div class="mc-field-group"> <label for="mce-FNAME">First Name <span class="asterisk">*</span> </label> <input type="text" value="" name="FNAME" class="required" id="mce-FNAME"> </div> <div class="mc-field-group"> <label for="mce-LNAME">Last Name </label> <input type="text" value="" name="LNAME" class="" id="mce-LNAME"> </div> <a href="#" id="mc_embed_close" class="mc_embed_close">Close</a> <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> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </form> </div> </code></pre> <p><strong>Javascript</strong></p> <pre><code><script type="text/javascript"> var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text'; 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://mysite.us3.list-manage1.com/subscribe/post-json?u=fcsfse12a6sfsdfsfaf5f5616e&id=0707dfe742&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); $('#mc_embed_signup').hide(); cks = document.cookie.split( ';' ); var show=true; for(i=0;i<cks.length;i++){ parts = cks[i].split('='); if( parts[0].indexOf('MCEvilPopupClosed')!= -1 ) show = false; } if (show){ $('#mc_embed_signup a.mc_embed_close').show(); setTimeout( function(){ $('#mc_embed_signup').fadeIn();} , 2000); $('#mc_embed_signup a.mc_embed_close').click(function(){ mcEvilPopupClose();}); } $(document).keydown(function(e){ if (e == null) { keycode = event.keyCode; } else { keycode = e.which; } if(keycode == 27){ mcEvilPopupClose(); } }); function mcEvilPopupClose(){ $('#mc_embed_signup').hide(); var now = new Date(); var expires_date = new Date( now.getTime() + 31536000000 ); document.cookie = 'MCEvilPopupClosed=yes;expires=' + expires_date.toGMTString()+';path=/'; } }); } 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> </code></pre> <p>The popup is set to launch automatically and the user can exit. I want to also put a link on the site to make the popup show on command. I have tried:</p> <pre><code><a onclick="$('#mc_embed_signup, #mc_embed_signup a.mc_embed_close').css('display', 'block');" href="#">Newsletter</a> </code></pre> <p>and the popup is shown but doesn't seem to work properly.<br> <strong>What is the correct form to launch this so called evil popup when I click on a link?</strong></p>
Tags
<javascript><popup><mailchimp>
Title
Launch Mailchimp evil popup onclick
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USRaul
UserOwnerUserId
1. USRaul
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.