时间戳

首页 > 解决方案 > Bootstrap Hide modal 和 Show other modal 事件触发不正确

javascript - Bootstrap Hide modal 和 Show other modal 事件触发不正确

问题描述

我在模态中有一个按钮，显示为 onload，名为.giveawayApplyNow. 单击时执行以下代码：

$('.giveawayApplyNow').click(function() {
    $('#GiveawayModal').modal('hide');
    $('#GiveawayModal').on('hidden.bs.modal', function () {
        $('#EligibilityModal').modal('show');
    });
});

此代码关闭当前模式并显示一个新模式。这工作正常。

我遇到的问题是我在同一个 modal 上有一个关闭图标.giveawayClose。如果我使用.giveawayApplyNow打开新的模态，然后关闭该模态，通过单击“了解更多”按钮重新打开第一个模态.learnMorebtn并再次调出原始模态，单击.giveawayClose按钮时，它正在执行$('.giveawayApplyNow').click(function()关闭当前模态的my并打开第二个，而不是仅仅关闭模式。

为什么是这样？

编辑：刚刚意识到这不仅基于单击关闭按钮，而且每当以任何方式关闭赠品模式时都会触发（例如单击模式外部以关闭它）

$( window ).on( "load", function() { 
    $('#GiveawayModal').modal();
    
});


$('.learnMorebtn').click(function() {
    $('#GiveawayModal').modal('show');
});

$('.giveawayClose').click(function() {
    $('#GiveawayModal').modal('hide');
});

$('.applyNowbtn, .secondaryheadingBtn').click(function() {
    $('#EligibilityModal').modal('show');
});

$('.eligibilityClose').click(function() {
    $('#EligibilityModal').modal('hide');
});

$('.giveawayApplyNow').click(function() {
    $('#GiveawayModal').modal('hide');
    $('#GiveawayModal').on('hidden.bs.modal', function () {
      $('#EligibilityModal').modal('show');
    });
    console.log('wuzi');
});
/* Modals */

.modal { overflow: auto !important; }

.modal-open {
  padding-right:0 !important;
}

.modal-lg {
    width: 90% !important;
    max-width: 1200px !important;
    
}

@media (max-width: 575px) { 
    .modal-lg {
        margin: 15px auto;    
    }
}

.modal-content {
    border-radius: 12px;
    border: none;
    
}

/* Giveaway Modal */

#GiveawayModal .modal-body {
    padding: 25px;
}


.giveawayHands {
    background-image: url('img/giveaway_popup_hands.jpg');
    background-size: cover;
    background-position: center center;
    border-radius: 12px;
    width: 100%;
    position: relative;
    
}

.Close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    cursor: pointer;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
}

.Close:hover {
  -webkit-animation-name: Close;
  animation-name: Close;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@-webkit-keyframes Close {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes Close {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

.giveawayTitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 64px;
    color: #191f4c;
    text-align: center;
    margin-bottom: 400px;
    margin-top: 40px;
    display: inline-block;
    width: 100%;
}

.giveawayOrange {
    background-color: rgba(242,101,34,0.78);
    border-radius: 12px;
    margin: 25px;
    color: white;
    text-align: center;
    padding: 15px;
}

.giveawayOrangeTop {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 25px;
    margin-top: 5px;
}

.giveawayOrangeBottom {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 19px;
    margin-top: 15px;
    margin-bottom: 5px;
}

.giveawayFineprint {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    display: inline-block;
    margin: 0 25px 15px;
    color: black;
}

.giveawayApplyNow {
    background-color: #008e39;
    color: white;
    border-radius: 12px;
    text-transform: uppercase;
    font-size: 34px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    text-align: center;
    padding: 10px;
    min-width: 287px;
    width: 25%;
    cursor: pointer;
    border: 3px solid #008e39;
    margin: 20px auto 10px;
    transition: color .3s, background-color .3s;    
}

.giveawayApplyNow:hover {
    background-color: white;
    color: #008e39;
}

@media (max-width: 1288px) {     
    .giveawayTitle {
        margin-bottom: 450px;
    }
}

@media (max-width: 1080px) {     
    .giveawayTitle {
        margin-bottom: 15px;
    }
}


@media (max-width: 767px) { 
    .giveawayHands {
        max-height: 841px;
    }
    
    .giveawayClose {
        width: 40px;
        top: 15px;
        right: 15px;
    }
}

@media (max-width: 714px) { 
    .giveawayTitle {
        font-size: 60px;
    }
}

@media (max-width: 620px) { 
    .giveawayTitle {
        font-size: 40px;
        margin-top: 60px;
    }
    
    .giveawayOrangeTop {
        font-size: 20px;
    }
    
    .giveawayOrangeBottom {
        font-size: 16px;
    }
}

@media (max-width: 418px) { 
    .giveawayTitle {
        font-size: 30px;
    }
    
    .giveawayOrangeTop {
        font-size: 17px;
    }
    
    .giveawayOrangeBottom {
        font-size: 15px;
    }
}

/* Eligible Modal */

.eligibilityTopMargin {
    margin-top: 80px;
}

.orangeBorderRight {
    border-right: 3px solid #f26522;
}

.eligibilityBtn {
    background-color: #008e39;
    color: white;
    border-radius: 8px;
    text-transform: uppercase;
    font-size: 34px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    text-align: center;
    padding: 5px;
    min-width: 287px;
    width: 65%;
    cursor: pointer;
    border: 3px solid #008e39;
    margin: 60px auto 40px;
    transition: color .3s, background-color .3s;
}

.eligibilityBtn:hover {
    color: #008e39;
    background-color: white;
}


.eligibilitybtnSub {
    min-width: 287px;
    width: 65%;
    text-align: center;
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    margin: auto;
    margin-bottom: 20px;
}

.AreYouEligible {
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 29px;
    border-radius: 12px;
    background-color: #f7941d;
    color: white;
    padding: 5px 20px;
    margin-top: 80px;
    margin-bottom: 30px;
}

.eligibleTick {
    width: 30px;
    display: inline-block;
    margin-bottom: 20px;
    vertical-align: top;
}

.eligibleTickText {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: black;
    display: inline-block;
    padding-left: 10px;
}

.warningIcon {
    width: 60px;
    display: inline-block;
    margin-bottom: 20px;
}

.warningText {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 35px;
    color: #f26522;
    display: inline-block;
    padding-left: 10px;
}


.eligibilityInfo {
    font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    font-size: 19px;
    color: black;
}

.eligibilityInfo a {
    color: #f26522;
}

.eligibilityInfo a:hover {
    text-decoration: underline;
}

.eligibilityList li {
    margin-top: 10px;
    margin-bottom: 10px;
}

.eligibilityFineprint {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-align: center;
    margin: 20px auto 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>  
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  
<div class="applyNowbtn">Apply Now</div>
<div class="learnMorebtn">Learn More</div>



<!-- Giveaway Popup -->    
<div class="modal fade" id="GiveawayModal" tabindex="-1" role="dialog" aria-labelledby="GiveawayModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="giveawayHands">
                    <img src="img/giveaway-close.svg" class="Close giveawayClose">
                    <div class="giveawayTitle">HANDEE’S $1000<br>WE’RE IN THIS TOGETHER<br>GIVEAWAY</div>
                    <div class="giveawayOrange">
                        <div class="giveawayOrangeTop">WE WANT TO THANK THE HANDEE COMMUNITY FOR SUPPORTING OUR LOCAL BUSINESS. APPLY NOW FOR YOUR CHANCE TO WIN</div>
                        <div class="giveawayOrangeBottom">ONE LUCKY HANDEE LOANS CLIENT WILL BE SELECTED EACH MONTH UNTIL THE END OF 2020 TO WIN $1000*</div>
                    </div>
                    <div class="giveawayFineprint">*To be eligible you must be approved for a Handee Loan during the months of the competition. Competition runs from 1st July 2020 to 31st December 2020. Winner for each month will be announced after the month has ended.</div>
                </div>
                <div class="giveawayApplyNow">Apply Now</div>
            </div>
        </div>
    </div>
</div> 
    
    
<!-- Eligibility Popup -->    
<div class="modal fade" id="EligibilityModal" tabindex="-1" role="dialog" aria-labelledby="EligibilityModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <img src="img/giveaway-close.svg" class="Close eligibilityClose">
                <div class="container">
                    <div class="row eligibilityTopMargin">
                        <div class="col-lg-6 orangeBorderRight">
                            <div class="eligibilityBtn">New Client</div>
                            <h6 class="eligibilitybtnSub">I have not had a loan previously with Handee Loans</h6>
                        </div>
                        <div class="col-lg-6">
                            <div class="eligibilityBtn">Existing Client</div>
                            <h6 class="eligibilitybtnSub">I have previously been approved for a loan with Handee Loans</h6>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="AreYouEligible">Are you eligible?</div>
                            <img class="eligibleTick" src="img/orangeTick.svg">
                            <div class="eligibleTickText">I'm a permanent Australia resident.</div><br>
                            <img class="eligibleTick" src="img/orangeTick.svg">
                            <div class="eligibleTickText">I'm paid $500 or more a week into my bank account.</div><br>
                            <img class="eligibleTick" src="img/orangeTick.svg">
                            <div class="eligibleTickText">I'm not in bankruptcy or part 9 agreement.</div>
                        </div> 
                    </div>
                    <div class="row" style="margin-top: 40px;">
                        <div class="col-lg-12">
                            <img src="img/orangeWarning.svg" class="warningIcon">
                            <div class="warningText">WARNING: DO YOU REALLY NEED A LOAN TODAY?*</div><br>
                            <div class="eligibilityInfo">
                            It can be expensive to borrow small amounts of money and borrowing may not solve your money problems.<br><br>
                            Check your options <u>before</u> you borrow:   <ul class="eligibilityList">
                                <li>For information about other options for managing bills and debts, ring <a href="tel:1800007007">1800 007 007</a> from anywhere in Australia to talk to a free and independent financial counsellor.</li>
                                <li>Talk to your electricity, gas, phone or water provider to work out a payment plan.</li>
                                <li>If you are on government benefits, ask for an advance payment from Centrelink:<br> <a href="https://www.humanservices.gov.au/advancepayments" target="_blank">www.humanservices.gov.au/advancepayments</a>
                                </li>
                            </ul>
                            The Government’s <a href="https://moneysmart.gov.au">MoneySmart Website</a> shows you how small amount loans work and suggests other options that may help you.    
                            </div>
                            <div class="eligibilityFineprint">
                            * This statement is an Australian Government requirement under the National Consumer Credit Protection Act 2009.</div>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</div>

标签： javascriptjquerybootstrap-4bootstrap-modal

解决方案

该事件添加了一个事件侦听器，每次关闭时.on('hidden.bs.modal',...)都会触发该事件侦听器。#GiveawayModal

似乎您只想让这种情况发生一次（如果单击了解更多按钮）。也许使用 jQuery.one(...)方法而不是只添加事件侦听器，然后在仅触发一次on(...)后将其删除。

推荐阅读