单击按钮后模态未关闭

Question

im尝试使用try-catch块构建模态，因此，如果所有内容均有效且以表格形式正确输入，则应关闭模态

这是函数登录名，我想知道为什么$('#dialog').modal('hide');不起作用

  <script>
        function login() {

            var kontakt = new Kontakt();
            kontakt.name = document.getElementById('name').value;
            kontakt.email = document.getElementById('email').value;
            kontakt.plz = document.getElementById('plz').value;
            kontakt.ort = document.getElementById('ort').value;
            kontakt.strasse = document.getElementById('strasse').value;




try {
    kontakt.pruefe();  
}
catch(err) {
    return window.alert(err.message);   
} 

kontakteSpeicher.neuerKontakt(kontakt);}
$('#dialog').modal('hide');
    </script>



    </head>

这是模态

 <div class="container">
                <h2></h2>
                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#dialog">
                    Login-Dialog öffnen
                </button>

                <!-- The Modal -->
                <div class="modal" id="dialog">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Login (im header)</h4>
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                            </div>

                            <div class="modal-body">
                                <div class="container">
                                    <p>im body:</p>
                                    <form>
                                        <div class="form-group row">
                                                    <label for="name" class="col-sm-2 col-form-label">Name</label>
                                                    <div class="col-sm-10">
                                                        <input type="text" class="form-control" placeholder="Name" id="name">
                                                    </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="email" class="col-sm-2 col-form-label">E-Mail</label>
                                            <div class="col-sm-10">
                                                <input type="email" class="form-control" placeholder="E-Mail" id="email">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="plz" class="col-sm-2 col-form-label">PLZ</label>
                                            <div class="col-sm-10">
                                                <input type="number" class="form-control" placeholder="PLZ" id="plz">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                                <label for="ort" class="col-sm-2 col-form-label">Ort</label>
                                                <div class="col-sm-10">
                                                    <input type="text" class="form-control" id="ort" placeholder="Ort">
                                                </div>
                                            </div>
                                        <div class="form-group row">
                                            <label for="strasse" class="col-sm-2 col-form-label">Strasse und Hausnummer</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="strasse" placeholder="Strasse und Hausnummer">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary btn-block" onclick="login()">Speichern</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

Answer 1

您唯一的问题是$（“＃dialog”）。modal（'hide'）语句不在您的登录函数主体内。 这应该起作用。

function login() {

        var kontakt = new Kontakt();
        kontakt.name = document.getElementById('name').value;
        kontakt.email = document.getElementById('email').value;
        kontakt.plz = document.getElementById('plz').value;
        kontakt.ort = document.getElementById('ort').value;
        kontakt.strasse = document.getElementById('strasse').value;




try {
    kontakt.pruefe();  
}
 catch(err) {
    return window.alert(err.message);   
} 

kontakteSpeicher.neuerKontakt(kontakt);
$('#dialog').modal('hide');
}

Answer 2

似乎在关闭模式之前，您正在关闭在线登录功能。 尝试更改此内容：

kontakteSpeicher.neuerKontakt(kontakt);}
$('#dialog').modal('hide');

对此：

kontakteSpeicher.neuerKontakt(kontakt);
$('#dialog').modal('hide'); }