我的网站上有一个模态CTA，可用于销售线索表格。我想要一个用于网站其他部分的新页面，所以我只复制了我制作的引导程序模版，并将其放在网站的另一部分中。但是当我去点击按钮时，什么也没发生。这很奇怪，因为我只是直接从主页复制了它，所以唯一更改的是数据目标和ID。我在这里做错了什么？
<section class="container">
<section class='ee-headings'>
<h1 class='text-align-center'>Shine Home Energy Solutions</h1>
<h3 class='text-align-center'>Energy Efficiency and Home Insulation Services</h3>
</section>
<div class='ee-cta-cont'>
<button type='button' class='btn btn-xl btn-orange' data-toggle='modal' data-target='ee-cta-call'>Get a Free Energy Efficiency Quote</button>
</div>
<section class='ee-explanation'>
<p></p>
<p></p>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
<p></p>
<ul class='checkmark-lists'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
</section>
<section class='ee-testimonials'>
<h1 class='text-align-center'>Testimonials</h1>
<div class='testimonial space-below'>
<p>My Energy Consumption yesterday was about 30% less than the day before. Not a coincidence considering Shine Home Energy Services insulated my entire attic yesterday morning! ☺ ☺ ☺ ☺</p>
<h4>Kandace White</h4>
</div>
<div class='testimonial space-below'>
<p>You all took a bad situation that was left by the previous contractor and without being rude to them you very politely explained that we didn’t get what we needed but you assured us when you all were done that we would be satisfied with the finished product.</p>
<p>For any future customers reading this I would gladly recommend you welcome these Fine folks into your home to get yourself moving into a future of cheaper utilities by all the steps that they provide!!!!!</p>
<h4>Don Wilkinson</h4>
</div>
</section>
<section class='ee-faq'>
<h1 class='text-align-center'>FAQs</h1>
<div class='faq'>
<h4></h4>
<p></p>
</div>
<div class='faq'>
<h4></h4>
<p></p>
</div>
<div class='faq'>
<h4></h4>
<p></p>
</div>
<div class='faq'>
<h4></h4>
<p></p>
</div>
<div class='faq'>
<h4></h4>
<p></p>
</div>
<div class='faq'>
<h4></h4>
<p></p>
</div>
</section>
<div class='ee-cta-cont'>
<button type='button' class='btn btn-xl btn-orange' data-toggle='modal' data-target='ee-cta-call'>Get a Free Energy Efficiency Quote</button>
</div>
</section>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<div id="ee-cta-call" class="modal fade" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div style="margin:auto;">
<form id="get-solar-test" accept-charset="UTF-8" siq_id="autopick_8180">
<input type="hidden" name="lp_campaign_id" value="59a5d339af0b3">
<input type="hidden" name="lp_campaign_key" value="bDFYBhdxMqQnTywZfPJK">
<style>
tr , td {
padding:6px;
border-spacing:0px;
border-width:0px;
}
</style>
<h3>Find Out If Solar Is Right For You</h3><table style="width:auto;">
<tbody><tr><td>How did you find out about us?<br>
<select name="Lead_Source2">
<option disabled selected="">Select One</option>
<option value="Radio">Radio</option>
<option value="TV">TV</option>
<option value="Facebook">Facebook</option>
<option value="Friends/Family">Friends/Family</option>
<option value="Google">Google</option>
<option value="Newspaper">Newspaper</option>
<option value="Other">Other</option>
</select>
</td></tr>
<tr><td>First Name<span style="color:red;">*</span><br><input type="text" maxlength="40" style="width:250px;" name="first_name" id="first_name" required></td></tr>
<tr><td>Last Name<span style="color:red;">*</span><br><input type="text" maxlength="80" style="width:250px;" name="last_name" id="last_name" required></td></tr>
<tr><td>Email<span style="color:red;">*</span><br><input type="email" maxlength="80" style="width:250px;" name="email_address" id="email_address" required></td></tr>
<tr><td>Phone<span style="color:red;">*</span><br><input type="text" title="Please input a valid ten digit phone number" pattern=".{10}" maxlength="30" style="width:250px;" name="phone_cell" id="phone_cell" required></td></tr>
<tr><td>Zip<span style="color:red;">*</span><br><input type="text" maxlength="9" style="width:250px;" name="zip_code" id="zip_code" required></td></tr>
<tr><td colspan="2" style="text-align:center; padding-top:15px;">
<style>
.loader,
.loader:after {
border-radius: 50%;
width: 3em;
height: 3em;
}
.loader {
margin: 0 auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: .6em solid #f58733;
border-right: .6em solid #f58733;
border-bottom: .6em solid #f58733;
border-left: .6em solid #ffffff;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 .8s infinite linear;
animation: load8 .8s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<input class="btn btn-orange btn-block" id="submitCtaScheduleCallButton" type="submit" value="Yes, I Want My Free Solar Analysis!">
<div id="waitForLoad" class=""></div>
<!-- <input type='reset' style='font-size:12px;color:#131307' value='Reset' /> -->
</td>
</tr>
</tbody></table>
<script>
var googleOption = document.querySelector('option[value=Google]');
var popUpDropDown = document.querySelector('select[name=Lead_Source2]');
var disabledOption = document.querySelector('option[disabled]');
var funnelForm = document.getElementById("get-solar-test");
funnelForm.addEventListener("submit", function(e) {
e.preventDefault();
document.getElementById("submitCtaScheduleCallButton").style.display = "none";
document.getElementById("waitForLoad").classList.add("loader");
var data = {lp_campaign_id:"59a5d339af0b3", lp_campaign_key:"bDFYBhdxMqQnTywZfPJK", Lead_Source2:"", firstName:"", lastName:"", email:"", phone:"", zip:"", vendorName:""};
data.Lead_Source2 = document.querySelector("select[name=Lead_Source2]").value;
data.firstName = document.getElementById("first_name").value;
data.lastName = document.getElementById("last_name").value;
data.email = document.getElementById("email_address").value;
data.phone = document.getElementById("phone_cell").value;
data.zip = document.getElementById("zip_code").value;
if (data.Lead_Source2 === "Google") {
data.vendorName = "Google_Adwords";
} else {
data.vendorName = "shinesolar.com";
}
if (data.phone.length === 10) {
data.phone = "1"+data.phone;
}
data.firstName = data.firstName.trim();
data.lastName = data.lastName.trim();
ga("send", "event", "Forms", "Submission", "CTA Form into Ricochet", "0");
var ajax = new XMLHttpRequest();
ajax.open("POST", "https://ricochet.me/api/v4/leads?page3");
ajax.setRequestHeader("Content-type", "application/json");
ajax.setRequestHeader("X-Auth-Token", "9d1869ccb75b8b8ea138bed4bf2u0412d");
ajax.send(JSON.stringify(data));
ajax.onload = function() {
var responseFromRicochet = JSON.parse(this.response);
if (responseFromRicochet.status) {
window.location = "https://homework.shinesolar.com";
} else {
var alertRequest = new XMLHttpRequest();
alertRequest.open("POST", "https://shinesolar.com/api/website-form-down-alert/");
alertRequest.setRequestHeader("Content-type", "application/json");
alertRequest.send(this.response);
alertRequest.onload = function() {
console.log(this.response);
}
}
}
});
</script>
</form>
</div>
<!-- end form -->
</div>
</div>
</div>
</div>最佳答案
我认为您在模态#值之前错过了data-target属性中的id。
实际：data-target='ee-cta-call'
预期：data-target='#ee-cta-call'