引导模式没有出现，即使它是直接副本

Question

我的网站上有一个模态 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! &#x263A; &#x263A; &#x263A; &#x263A;</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>

Answer 1

我认为您在模态 id 值之前的 data-target 属性中错过了 #。

实际：data-target='ee-cta-call'

预期：data-target='#ee-cta-call'