我如何将此延迟模式弹出窗口上的电子邮件表单(mailchimp)更改为此(getresponse)代码?

问题描述 投票:0回答:1

这对我来说是一场噩梦。我不知道如何简单地更改5秒钟后弹出的表单代码。当我更改它时,颜色,字体一切都会改变。我曾尝试一次更改1件事,但有一次我接近了,但是我无法更改按钮的颜色,而在浏览器中,格式完全不合时宜...如果有人可以帮助我,那太神奇了!

原始代码

$(document).ready(function ()
(function ()
{
	//Fade in delay for the background overlay (control timing here)
	$("#bkgOverlay").delay(4800).fadeIn(400);
  //Fade in delay for the popup (control timing here)
	$("#delayedPopup").delay(5000).fadeIn(400);
	
	//Hide dialouge and background when the user clicks the close button
	$("#btnClose").click(function (e)
	{
		HideDialog();
		e.preventDefault();
	});
});
//Controls how the modal popup is closed with the close button
function HideDialog()
{
	$("#bkgOverlay").fadeOut(400);
	$("#delayedPopup").fadeOut(300);
}
.instructions {
  text-align:center;
  font-size:20px;
  margin: 15vh;
}  

/* //////////////////////////////////////////////////////////////////////////////////////////////
	//   Default Modal Styles   //
////////////////////////////////////////////////////////////////////////////////////////////// */
/*   This is the background overlay   */
.backgroundOverlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #000000;
	opacity: .85;
	filter: alpha(opacity=85);
	-moz-opacity: .85;
	z-index: 101;
	display: none;
}
/*   This is the Popup Window   */
.delayedPopupWindow {
	display: none;
	position: fixed;
	width: auto;
	max-width: 480px;
	height: 310px;
	top: 50%;
	left: 50%;
	margin-left: -260px;
	margin-top: -180px;
	background-color: #efefef;
	border: 2px solid #333;
	z-index: 102;
	padding: 10px 20px;
}
/*   This is the closing button  */
#btnClose {
	width:100%;
	display: block;
	text-align: right;
	text-decoration: none;
	color: #BCBCBC;
}
/*   This is the closing button hover state  */
#btnClose:hover {
	color: #c90c12;
}
/*   This is the description headline and paragraph for the form   */
#delayedPopup > div.formDescription {
	float: left;
	display: block;
	width: 44%;
	padding: 1% 3%;
	font-size: 18px;
	color: #666;
	clear: left;
}
/*   This is the styling for the form's headline   */
#delayedPopup > div.formDescription h2 {
	color: #444444;
	font-size: 36px;
	line-height: 40px;
}

/* 
////////// MailChimp Signup Form //////////////////////////////
*/

/*   This is the signup form body  */
#delayedPopup #mc_embed_signup {
	float: left;
	width: 47%;
	padding: 1%;
	display: block;
	font-size: 16px;
	color: #666;
	margin-left: 1%;
}
/*   This is the styling for the signup form inputs  */
#delayedPopup #mc-embedded-subscribe-form input {
	width: 95%;
	height: 30px;
	font-size: 18px;
	padding: 3px;
  margin-bottom: 5px;
}
/*   This is the styling for the signup form inputs when they are being hovered with the mouse  */
#delayedPopup #mc-embedded-subscribe-form input:hover {
	border:solid 2px #40c348;
	box-shadow: 0 1px 3px #AAAAAA;
}
/*   This is the styling for the signup form inputs when they are focused  */
#delayedPopup #mc-embedded-subscribe-form input:focus {
	border:solid 2px #40c348;
	box-shadow: none;
}
/*   This is the styling for the signup form submit button  */
#delayedPopup #mc-embedded-subscribe {
	width: 100%!important;
	height: 40px!important;
	margin: 10px auto 0 auto;
	background: #5D9E62;
	border: none;
	color: #fff;
}
/*   This is the styling for the signup form submit button hover state  */
#delayedPopup #mc-embedded-subscribe:hover {
	background: #40c348;
	color: #fff;
	box-shadow:none!important;
	cursor: pointer;
}
<div class="instructions">Wait for 5 seconds</div>

<div id="bkgOverlay" class="backgroundOverlay"></div>
  
<div id="delayedPopup" class="delayedPopupWindow">
  <!-- This is the close button -->
  <a href="#" id="btnClose" title="Click here to close this deal box.">[ X ]</a>
  <!-- This is the left side of the popup for the description -->
  <div class="formDescription">
    <h2>Sign Up and <span style="color: #40c348; font-weight: bold;">Save $25!</span></h2>
    <p>Sign up for our Deal Alerts and save
      $25 Off of your first order of $50 or more!</p>
  </div>
  <!-- Begin MailChimp Signup Form -->
  <div id="mc_embed_signup">
    <form action="" 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-FNAME">First Name
          <span class="asterisk">*</span>
        </label>
        <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
      </div>
      <div class="mc-field-group">
        <label for="mce-LNAME">Last Name
          <span class="asterisk">*</span>
        </label>
        <input type="text" value="" name="LNAME" class="" id="mce-LNAME">
      </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 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_2aabb98e55b83ba9d3bd551f5_e6c08b53b4" value="">
      </div>
      <div class="clear">
        <input type="submit" value="Save Money!" name="subscribe" id="mc-embedded-subscribe" class="button">
      </div>
    </form>
  </div>
  <!-- End MailChimp Signup Form -->
</div>

这是我希望将表格更改为的代码-

<button type="button" button-data-id="1" id="lead_button_form" div class="form_box" >

输入有效名称和电子邮件

<form class="form-horizontal validate formdetails show" name="optin" id="optin" form action="" accept-charset="utf-8" method="post">
    <!-- Name -->
    <input type="text" name="name" placeholder="Name" /><br/>
    <!-- Email field (required) -->
    <input type="text" name="email" placeholder="Email" /><br/>
    <!-- Campaign token -->
    <!-- Get the token at: https://app.getresponse.com/campaign_list.html -->
    <input type="hidden" name="campaign_token" value="G" />
    <!-- Thank you page (optional) -->
    <input type="hidden" name="thankyou_url" value="https://reviewtheinside.com/Easy-eCash-Review-and-Bonuses.htm"/>
    <!-- Add subscriber to the follow-up sequence with a specified day (optional) -->
    <input type="hidden" name="start_day" value="0" />
    <!-- Forward form data to your page (optional) -->
    <input type="hidden" name="forward_data" value="" />
    <!-- Subscriber button -->
    <input type="submit" button type="button" button-data-id="1" id="lead_button" value="SUBMIT"/>

<div class="clearfix"></div>
                                        <div class="mbr-row">
                                          <div class="inner-addon right-addon"><p id="smtp-error"></p></div>
                                        </div>
</form>

javascript forms popup lightbox modalpopup
1个回答
0
投票

确定您正确调用了该函数

(function ()
{
    //Fade in delay for the background overlay (control timing here)
    $("#bkgOverlay").delay(4800).fadeIn(400);
  //Fade in delay for the popup (control timing here)
    $("#delayedPopup").delay(5000).fadeIn(400);

    //Hide dialouge and background when the user clicks the close button
    $("#btnClose").click(function (e)
    {
        HideDialog();
        e.preventDefault();
    });
})(); //call the function
//Controls how the modal popup is closed with the close button
function HideDialog()
{
    $("#bkgOverlay").fadeOut(400);
    $("#delayedPopup").fadeOut(300);
}
© www.soinside.com 2019 - 2024. All rights reserved.