显示警报后布尔模态保持关闭

Question

Currently my modal and alert works fine.

This is my modal right now.

and it works fine

currently if you click the continue button

it will show an alert like this

But when you click the ok button of this alert the modal keeps closing after that

I'm trying to keep it showing even if the user clicks the ok button of the alert

here's my modal code

 <a class="modal-button button is-info" data-target="myModal">
 <em>Click here to manage balance..</em>
 </a>




 <div class="modal animated fadeIn" id="myModal">
    <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
            <p class="modal-card-title"><span class="file-icon is-inline"><i class="fas fa-credit-card"></i></span>....content</p> 
                <button class="delete" aria-label="close"></button>
            </header>
            <section class="modal-card-body">
            .......content
            </section>
        <footer class="modal-card-foot">
            <button class="button is-info has-text-weight-bold" id="proceedBal">Continue</button>
            <button class="button">Cancel</button>
        </footer>
        </div>
    </div>

Here's my JS code

$('#proceedBal').click(function(){ 
    alert("Hello World!");

});

Answer 1

It's quite hard to troubleshoot without full code, my guess is the button is submitting the form, which is the default behavior of button tag.

Try either:

A. set button type to button

<button type="button" class="button is-info has-text-weight-bold" id="proceedBal">Continue</button>

OR

B. prevent the default behavior

$('#proceedBal').click(function(e){
    e.preventDefault();
    alert("Hello World!");
});