代码之家  ›  专栏  ›  技术社区  ›  Adam McGurk

引导模式不出现,即使它是直接复制

  •  0
  • Adam McGurk  · 技术社区  · 7 年前

    我在我的网站上有一个模式的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>
    1 回复  |  直到 7 年前
        1
  •  1
  •   rkm    7 年前

    我想你错过了 # 在里面 data-target 模态前的属性 id 价值。

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

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

    推荐文章