See example page here.
我正在使用的小Js脚本看起来像这样：
<script>let $input = document.getElementByID('mc-embedded-subscribe') $input.addEventListener('click',function (){ this.value= "close" this.backgroundcolor= "red" })</script> 我在这里错过了什么？
Codepen.
<script type='text/JavaScript' src='//s3.amazonaws.com/downloads.mailchimp.com/Js/mc-valIDate.Js'></script><script type='text/JavaScript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='Fname';ftypes[1]='text';fnames[2]='COUNTRY';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='text';}(jquery));var $mcj = jquery.noConflict(true);</script> <!--End mc_embed_signup--><!-- Start mc_embed Script Signup --><script type='text/JavaScript' src='https://s3.amazonaws.com/downloads.mailchimp.com/Js/mc-valIDate.Js'></script><script type='text/JavaScript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='Fname';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';$.extend($.valIDator.messages,{ required: "Dette felt er påkrævet.",maxlength: $.valIDator.format("Indtast høJst {0} tegn."),minlength: $.valIDator.format("Indtast mindst {0} tegn."),rangelength: $.valIDator.format("Indtast mindst {0} og høJst {1} tegn."),email: "Indtast en gyldig email-adresse.",});}(jquery));var $mcj = jquery.noConflict(true);</script><script>let $input = document.getElementByID('mc-embedded-subscribe') $input.addEventListener('click',function (){ this.value= "close" this.backgroundcolor= "red" })</script> #mc_embed_signup{background:#fff; clear:left; Font:14px Helvetica,Arial,sans-serif; } /* MailChimp Form Embed Code - Classic - 12/17/2015 v10.7 */#mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}#mc_embed_signup h2 {Font-weight:bold; padding:0; margin:15px 0; Font-size:1.4em;}#mc_embed_signup input {border: 1px solID #ABB0B2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}#mc_embed_signup input:focus {border-color:#333;}#mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; Transition: all 0.23s ease-in-out 0s; color: #FFFFFF; cursor: pointer; display: inline-block; Font-size:15px; Font-weight: normal; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; wIDth: auto;}#mc_embed_signup .button:hover {background-color:#777;}#mc_embed_signup .small-Meta {Font-size: 11px;}#mc_embed_signup .nowrap {white-space:nowrap;}#mc_embed_signup .mc-fIEld-group {clear:left; position:relative; wIDth:96%; padding-bottom:3%; min-height:50px;}#mc_embed_signup .size1of2 {clear:none; float:left; display:inline-block; wIDth:46%; margin-right:4%;}* HTML #mc_embed_signup .size1of2 {margin-right:2%; /* Fix for ie6 double margins. */}#mc_embed_signup .mc-fIEld-group label {display:block; margin-bottom:3px;}#mc_embed_signup .mc-fIEld-group input {display:block; wIDth:100%; padding:8px 0; text-indent:2%;}#mc_embed_signup .mc-fIEld-group select {display:inline-block; wIDth:99%; padding:5px 0; margin-bottom:2px;}#mc_embed_signup .datefIEld,#mc_embed_signup .phonefIEld-us{padding:5px 0;}#mc_embed_signup .datefIEld input,#mc_embed_signup .phonefIEld-us input{display:inline; wIDth:60px; margin:0 2px; letter-spacing:1px; text-align:center; padding:5px 0 2px 0;}#mc_embed_signup .phonefIEld-us .phonearea input,#mc_embed_signup .phonefIEld-us .phonedetail1 input{wIDth:40px;}#mc_embed_signup .datefIEld .monthfIEld input,#mc_embed_signup .datefIEld .dayfIEld input{wIDth:30px;}#mc_embed_signup .datefIEld label,#mc_embed_signup .phonefIEld-us label{display:none;}#mc_embed_signup .indicates-required {text-align:right; Font-size:11px; margin-right:4%;}#mc_embed_signup .asterisk {color:#e85c41; Font-size:150%; Font-weight:normal; position:relative; top:5px;} #mc_embed_signup .clear {clear:both;}#mc_embed_signup .mc-fIEld-group.input-group ul {margin:0; padding:5px 0; List-style:none;}#mc_embed_signup .mc-fIEld-group.input-group ul li {display:block; padding:3px 0; margin:0;}#mc_embed_signup .mc-fIEld-group.input-group label {display:inline;}#mc_embed_signup .mc-fIEld-group.input-group input {display:inline; wIDth:auto; border:none;}#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; wIDth:90%; margin: 0 5%; clear: both;}#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; Font-weight:bold; float:left; top:-1.5em; z-index:1; wIDth:80%;}#mc_embed_signup #mce-error-response {display:none;}#mc_embed_signup #mce-success-response {color:#529214; display:none;}#mc_embed_signup label.error {display:block; float:none; wIDth:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}#mc-embedded-subscribe {clear:both; wIDth:auto; display:block; margin:1em 0 1em 5%;}#mc_embed_signup #num-subscribers {Font-size:1.1em;}#mc_embed_signup #num-subscribers span {padding:.5em; border:1px solID #ccc; margin-right:.5em; Font-weight:bold;}#mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error {display:inline-block; margin:2px 0 1em 0; padding:5px 10px; background-color:rgba(255,255,0.85); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; Font-size:14px; Font-weight:normal; z-index:1; color:#e85c41;}#mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error {border:2px solID #e85c41;} <!DOCTYPE HTML><HTML lang="en"><head> <Title>bootstrap Example</Title> <Meta charset="utf-8"> <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS"> <script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/Js/bootstrap.min.Js"></script></head><body><div > <a href="#"> <div > <div > <figure> <a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding"> <img src="https://dohanews.co/wp-content/uploads/2016/07/headline.png" alt="Sign up for our newsletter" ></img> </a> </figure> </div> <div ID="nyhedsbrev-tilmelding" role="dialog"> <div > <div > <div > <div ID="mc_embed_signup"> <form action="https://zalis.us17.List-manage.com/subscribe/post?u=3be651219436ee0f217f040a5&ID=d07c036d2e" method="post" ID="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalIDate> <div ID="mc_embed_signup_scroll"> <h2>Subscribe to our mailing List</h2> <div ><span >*</span> indicates required</div> <div > <label for="mce-EMAIL">Email Address <span >*</span></label> <input type="email" value="" name="EMAIL" ID="mce-EMAIL"> </div> <div > <label for="mce-Fname">First name </label> <input type="text" value="" name="Fname" ID="mce-Fname"> </div> <div ID="mce-responses" > <div ID="mce-error-response" ></div> <div ID="mce-success-response" ></div> </div> <div aria-hIDden="true"><input type="text" name="b_3be651219436ee0f217f040a5_d07c036d2e" tabindex="-1" value=""></div> <div > <input type="submit" value="Subscribe" name="subscribe" ID="mc-embedded-subscribe" > </div> </div> </form> </div> </div> </div> </div> </div> <div ></div> </div> </a></div></body></HTML>解决方法 你可以使用下面的代码,这是一个快速修复.
I have placed a check for checking success message is displayed or not Timeout of 1 second to change the close text and adding the attribute of data-dismiss of the modal in order to close the popup
let $input = document.getElementByID('mc-embedded-subscribe') $input.addEventListener('click',function (){ setTimeout(function(){ if(document.getElementByID("mce-success-response").style.display != "none") { document.getElementByID('mc-embedded-subscribe').value= "close",document.getElementByID('mc-embedded-subscribe').setAttribute('data-dismiss','modal') }},1000); }) <script type='text/JavaScript' src='//s3.amazonaws.com/downloads.mailchimp.com/Js/mc-valIDate.Js'></script><script type='text/JavaScript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='Fname';ftypes[1]='text';fnames[2]='COUNTRY';ftypes[2]='text';fnames[3]='MMERGE3';ftypes[3]='text';}(jquery));var $mcj = jquery.noConflict(true);</script> <!--End mc_embed_signup--><!-- Start mc_embed Script Signup --><script type='text/JavaScript' src='https://s3.amazonaws.com/downloads.mailchimp.com/Js/mc-valIDate.Js'></script><script type='text/JavaScript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[1]='Fname';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';$.extend($.valIDator.messages,1000); })</script> #mc_embed_signup{background:#fff; clear:left; Font:14px Helvetica,initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS"> <script src="https://AJAX.GoogleAPIs.com/AJAX/libs/jquery/3.3.1/jquery.min.Js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/Js/bootstrap.min.Js"></script></head><body><div > <a href="#"> <div > <div > <figure> <a href="#" data-toggle="modal" data-target="#nyhedsbrev-tilmelding"> <img src="https://dohanews.co/wp-content/uploads/2016/07/headline.png" alt="Sign up for our newsletter" ></img> </a> </figure> </div> <div ID="nyhedsbrev-tilmelding" role="dialog"> <div > <div > <div > <div ID="mc_embed_signup"> <form action="https://zalis.us17.List-manage.com/subscribe/post?u=3be651219436ee0f217f040a5&ID=d07c036d2e" method="post" ID="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalIDate> <div ID="mc_embed_signup_scroll"> <h2>Subscribe to our mailing List</h2> <div ><span >*</span> indicates required</div> <div > <label for="mce-EMAIL">Email Address <span >*</span></label> <input type="email" value="" name="EMAIL" ID="mce-EMAIL"> </div> <div > <label for="mce-Fname">First name </label> <input type="text" value="" name="Fname" ID="mce-Fname"> </div> <div ID="mce-responses" > <div ID="mce-error-response" ></div> <div ID="mce-success-response" ></div> </div> <div aria-hIDden="true"><input type="text" name="b_3be651219436ee0f217f040a5_d07c036d2e" tabindex="-1" value=""></div> <div > <input type="submit" value="Subscribe" name="subscribe" ID="mc-embedded-subscribe" > </div> </div> </form> </div> </div> </div> </div> </div> <div ></div> </div> </a></div></body></HTML> 总结 以上是内存溢出为你收集整理的html – Bootstrap模式框中的关闭按钮不起作用全部内容，希望文章能够帮你解决html – Bootstrap模式框中的关闭按钮不起作用所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）