javascript - Bootstrap Modal 不会在 Chrome 和 Safari 上关闭

Question

问题:我想点击 X(超赞字体图标)并关闭弹出窗口的模式，但它不会关闭。

它仅适用于某些浏览器和条件:

到目前为止，x 仅关闭 IE 和 Firefox 模式，但在 Chrome 和 Safari 浏览器上它根本没有关闭。另一件有用的事情是当我键入字母“x”并且不在按钮标签内使用任何其他标签时。但是，我想将 Font Awesome 图标用于设计目的。

请帮助:我对 JavaScript 了解不多，而且我似乎无法使用当前的注册/登录模式设置来解决这个问题。

这里有一个 fiddle 可以玩:https://jsfiddle.net/o5vpt6ck/

HTML:

    <div class="cd-signin-modal js-signin-modal"> <!-- this is the entire modal form, including the background -->
        <div class="cd-signin-modal__container"> <!-- this is the container wrapper -->
            <ul class="p-0 cd-signin-modal__switcher js-signin-modal-switcher js-signin-modal-trigger">
                <li><a href="#0" data-signin="login" data-type="login">Sign in</a></li>
                <li><a href="#0" data-signin="signup" data-type="signup">New account</a></li>
            </ul>

            <div class="cd-signin-modal__block js-signin-modal-block" data-type="login"> <!-- log in form -->
                <form id="login-form" class="cd-signin-modal__form" action="confirm" method="post">
                 <h3 class="bigsentence black text-center font-weight-bold">Log in</h3>
                    <p class="cd-signin-modal__fieldset">
                    <div class="sentence" id="noenter">This account doesn't exist please try again or create a new account.</div> 
                        <label class="cd-signin-modal__label font-weight-bold cd-signin-modal__label--image-replace" for="signin-email">Enter your email or username</label>
                        <input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" required id="username" name="username" type="text" placeholder="Email or username">
                    </p>

                    <p class=" cd-signin-modal__fieldset">
                        <label class="cd-signin-modal__label cd-signin-modal__label--password cd-signin-modal__label--image-replace" for="signin-password">Enter your password</label>
                        <input required name="password" class="passpad cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="password" type="text"  placeholder="Password">
                        <a href="#0" class="cd-signin-modal__hide-password js-hide-password sentence">Hide</a>
                    </p>

                    <p class="cd-signin-modal__fieldset">
                        <input class="cd-signin-modal__input cd-signin-modal__input--full-width" name="submit" type="submit" value="LOG IN">
                    </p>
                </form>

                <p class="m-0 cd-signin-modal__bottom-message js-signin-modal-trigger sentence"><a href="#0" data-signin="reset">Forgot your password?</a></p>
            </div> <!-- cd-signin-modal__block -->

            <div class="cd-signin-modal__block js-signin-modal-block" data-type="signup"> <!-- sign up form -->
                <form id="signup-form" class="cd-signin-modal__form" action="" method="post">
                    <h3 class="bigsentence black text-center font-weight-bold">Create</h3>
                    <p class="cd-signin-modal__fieldset">
                        <label class="cd-signin-modal__label cd-signin-modal__label--email cd-signin-modal__label--image-replace" for="signup-email">Enter your email address</label>
                        <input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border signupfield" id="email" type="email" name="email" placeholder="Enter your email address">
                    </p>

                    <p class="cd-signin-modal__fieldset">
                        <input class="cd-signin-modal__input cd-signin-modal__input--full-width" name="submit" type="submit" value="GET STARTED">
                    </p>
                </form>
            </div> <!-- cd-signin-modal__block -->

            <div class="cd-signin-modal__block js-signin-modal-block" data-type="reset"> <!-- reset password form -->



                <form id="password-form" class="cd-signin-modal__form" action="" method="post">
                    <h3 style="padding:0!important; margin:0!important; height:20px!important; " class="bigsentence black text-center font-weight-bold">Reset your Password</h3>
                    <p class="cd-signin-modal__fieldset">
                        <label class="cd-signin-modal__label cd-signin-modal__label--email sentence" for="reset-email">Please enter the email address associated with your account.</label>
                        <input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding cd-signin-modal__input--has-border" id="email" type="email" name="email" placeholder="Enter your email address">

                    </p>

                    <p class="cd-signin-modal__fieldset">
                        <input class="cd-signin-modal__input cd-signin-modal__input--full-width cd-signin-modal__input--has-padding" type="submit"  name="submit" value="Reset password">
                    </p>
                </form>

                <p class="m-0 cd-signin-modal__bottom-message js-signin-modal-trigger"><a href="#0" data-signin="login">Back to log in</a></p>
            </div> <!-- cd-signin-modal__block -->


           <button type="button" class="js-close close" data-dismiss="modal" aria-label="Close">
            <i style="position:absolute; top:-30px!important;" aria-hidden="true" class="text-white fas fa-times"></i>
          </button>
        </div> <!-- cd-signin-modal__container -->
    </div> <!-- cd-signin-modal -->




  <nav class="navbar navbar-expand fixed-top bg-white">
<div class="container-fluid">
  </div>
        <ul class="container-fluid navbar-nav js-signin-modal-trigger justify-content-end list-unstyled" id="navbar2SupportedContent">
                    <!-- inser more links here --> 
                <li><a href="#0" data-signin="login" class="Loginbtn sentence btn navbar-btn ml-xs-2 ml-sm-2 px-md-4 px-sm-2 px-xs-1">Log in</a></li>               
                <li><a href="#0" data-signin="signup" class="signupbtn sentence btn px-md-4 px-sm-2 px-xs-1 navbar-btn ml-md-2 ml-sm-1 text-white btn-secondary">Sign up</a></li>
            </ul>
  </nav>

JS:

(function(){
    //Login/Signup modal window - by CodyHouse.co
    function ModalSignin( element ) {
        this.element = element;
        this.blocks = this.element.getElementsByClassName('js-signin-modal-block');
        this.switchers = this.element.getElementsByClassName('js-signin-modal-switcher')[0].getElementsByTagName('a'); 
        this.triggers = document.getElementsByClassName('js-signin-modal-trigger');
        this.hidePassword = this.element.getElementsByClassName('js-hide-password');
        this.init();
    };

    ModalSignin.prototype.init = function() {
        var self = this;
        //open modal/switch form
        for(var i =0; i < this.triggers.length; i++) {
            (function(i){
                self.triggers[i].addEventListener('click', function(event){
                    if( event.target.hasAttribute('data-signin') ) {
                        event.preventDefault();
                        self.showSigninForm(event.target.getAttribute('data-signin'));
                    }
                });
            })(i);
        }

        //close modal
        this.element.addEventListener('click', function(event){
            if( hasClass(event.target, 'js-signin-modal') || hasClass(event.target, 'js-close') ) {
                event.preventDefault();
                removeClass(self.element, 'cd-signin-modal--is-visible');
            }
        });
        //close modal when clicking the esc keyboard button
        document.addEventListener('keydown', function(event){
            (event.which=='27') && removeClass(self.element, 'cd-signin-modal--is-visible');
        });

        //hide/show password
        for(var i =0; i < this.hidePassword.length; i++) {
            (function(i){
                self.hidePassword[i].addEventListener('click', function(event){
                    self.togglePassword(self.hidePassword[i]);
                });
            })(i);
        } 

        //IMPORTANT - REMOVE THIS - it's just to show/hide error messages in the demo
        this.blocks[0].getElementsByTagName('form')[0].addEventListener('submit', function(event){
            event.preventDefault();
            self.toggleError(document.getElementById('signin-email'), true);
        });
        this.blocks[1].getElementsByTagName('form')[0].addEventListener('submit', function(event){
            event.preventDefault();
            self.toggleError(document.getElementById('signup-username'), true);
        });
    };

    ModalSignin.prototype.togglePassword = function(target) {
        var password = target.previousElementSibling;
        ( 'password' == password.getAttribute('type') ) ? password.setAttribute('type', 'text') : password.setAttribute('type', 'password');
        target.textContent = ( 'Hide' == target.textContent ) ? 'Show' : 'Hide';
        putCursorAtEnd(password);
    }

    ModalSignin.prototype.showSigninForm = function(type) {
        // show modal if not visible
        !hasClass(this.element, 'cd-signin-modal--is-visible') && addClass(this.element, 'cd-signin-modal--is-visible');
        // show selected form
        for( var i=0; i < this.blocks.length; i++ ) {
            this.blocks[i].getAttribute('data-type') == type ? addClass(this.blocks[i], 'cd-signin-modal__block--is-selected') : removeClass(this.blocks[i], 'cd-signin-modal__block--is-selected');
        }
        //update switcher appearance
        var switcherType = (type == 'signup') ? 'signup' : 'login';
        for( var i=0; i < this.switchers.length; i++ ) {
            this.switchers[i].getAttribute('data-type') == switcherType ? addClass(this.switchers[i], 'cd-selected') : removeClass(this.switchers[i], 'cd-selected');
        } 
    };

    ModalSignin.prototype.toggleError = function(input, bool) {
        // used to show error messages in the form
        toggleClass(input, 'cd-signin-modal__input--has-error', bool);
        toggleClass(input.nextElementSibling, 'cd-signin-modal__error--is-visible', bool);
    }

    var signinModal = document.getElementsByClassName("js-signin-modal")[0];
    if( signinModal ) {
        new ModalSignin(signinModal);
    }

    // toggle main navigation on mobile
    var mainNav = document.getElementsByClassName('js-main-nav')[0];
    if(mainNav) {
        mainNav.addEventListener('click', function(event){
            if( hasClass(event.target, 'js-main-nav') ){
                var navList = mainNav.getElementsByTagName('ul')[0];
                toggleClass(navList, 'cd-main-nav__list--is-visible', !hasClass(navList, 'cd-main-nav__list--is-visible'));
            } 
        });
    }

    //class manipulations - needed if classList is not supported
    function hasClass(el, className) {
        if (el.classList) return el.classList.contains(className);
        else return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
    }
    function addClass(el, className) {
        var classList = className.split(' ');
        if (el.classList) el.classList.add(classList[0]);
        else if (!hasClass(el, classList[0])) el.className += " " + classList[0];
        if (classList.length > 1) addClass(el, classList.slice(1).join(' '));
    }
    function removeClass(el, className) {
        var classList = className.split(' ');
        if (el.classList) el.classList.remove(classList[0]);    
        else if(hasClass(el, classList[0])) {
            var reg = new RegExp('(\\s|^)' + classList[0] + '(\\s|$)');
            el.className=el.className.replace(reg, ' ');
        }
        if (classList.length > 1) removeClass(el, classList.slice(1).join(' '));
    }
    function toggleClass(el, className, bool) {
        if(bool) addClass(el, className);
        else removeClass(el, className);
    }

    //credits http://css-tricks.com/snippets/jquery/move-cursor-to-end-of-textarea-or-input/
    function putCursorAtEnd(el) {
        if (el.setSelectionRange) {
            var len = el.value.length * 2;
            el.focus();
            el.setSelectionRange(len, len);
        } else {
            el.value = el.value;
        }
    };
})();

Answer 1

添加类名 btn-js-close 并将此类包含在您的 JS 条件中

工作代码 - JSFiddle

HTML 更改:

<i style="position:absolute; top:-30px!important;" aria-hidden="true" class="btn-js-close text-white fas fa-times"></i>

JS 变化:

if( hasClass(event.target, 'js-signin-modal') || hasClass(event.target, 'btn-js-close') ) {
                removeClass(self.element, 'cd-signin-modal--is-visible');
                event.preventDefault();
            }