Bootstrap模式不会出现，即使它是直接副本

Question

I have a modal cta on my website that I use for lead forms. I wanted a new page for a different part of my website, and so I just copied the bootstrap modal I made, and put it on the other part of my website. But when I went to click the button, nothing happened. This is weird, because I just directly copied it from my homepage, the only thing I changed was the data-target and the id. What did I do wrong here?

 <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

I think you missed # in data-target attribute before modal id value.

Actual: data-target='ee-cta-call'

Expected: data-target='#ee-cta-call'