Оба способа запускаются при нажатии

Question

Я пытаюсь использовать два модальных режима, которые имеют свои собственные кнопки для их запуска и будут скрыты, когда страница загружается с javascript вместо атрибутов данных. В настоящее время они оба запускаются при загрузке страницы и оба всплывают, когда я нажимаю любую кнопку для входа в систему или кнопку резервирования таблицы. Вот мой код:

Дом О Меню Контакт Логин

<div id="loginModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" role="content">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Login </h4>
                <button type="button" class="close" id="btnCloselogin" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-row">
                        <div class="form-group col-sm-4">
                                <label class="sr-only" for="exampleInputEmail3">Email address</label>
                                <input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
                        </div>
                        <div class="form-group col-sm-4">
                            <label class="sr-only" for="exampleInputPassword3">Password</label>
                            <input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
                        </div>
                        <div class="col-sm-auto">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox">
                                <label class="form-check-label"> Remember me
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>        
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<header class="jumbotron">
    <div class="container">
        <div class="row row-header">
            <div class="col-sm-6">
                <h1>Ristorante con Fusion</h1>
                <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
            </div>
            <div class="col-sm-3 align-self-center">
                <img src="img/logo.png" class="img-fluid" alt="">
            </div>
            <div class="col-sm-3 align-self-center btn btn-warning btn-block">
                <a href="" 
                title="Or Call us at <br><strong>+852 12345678</strong>" 
                href="" id="reservebutton">Reserve Table</a>
            </div>
        </div>
    </div>
</header>
<div id="reserveModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" role="content">
        <div class="modal-content">
            <div class="modal-header">
                <h1>Reserve a Table</h1>

                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">

                <div>
                    <form class="inline">
                        <div class="form-group row">
                            <div class="col-sm-3"> 
                                <label for="exampleInputEmail1">Number of Guests</label>
                            </div>
                            <div class="col-sm-9">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                                    <label class="form-check-label" for="inlineRadio1">1</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                    <label class="form-check-label" for="inlineRadio2">2</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                                    <label class="form-check-label" for="inlineRadio1">3</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                    <label class="form-check-label" for="inlineRadio2">4</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                                    <label class="form-check-label" for="inlineRadio1">5</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                    <label class="form-check-label" for="inlineRadio2">6</label>
                                </div>
                            </div>
                        </div>
                            <div class="form-row mb-2">
                                <div class="col-sm-3">
                                    <label for="Section">Section</label>
                                </div>
                                <div class="btn-group btn-group-toggle col-sm-4" data-toggle="buttons">
                                    <label class="btn btn-secondary btn-success active">
                                    <input type="radio" name="options" id="option1" autocomplete="off" checked> Non-smoking
                                    </label>
                                    <label class="btn btn-secondary btn-danger">
                                    <input type="radio" name="options" id="option2" autocomplete="off"> Smoking
                                    </label>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-sm-3">
                                    <label for="exampleInputPassword1">Date and Time</label>
                                </div>
                                <div class="col-sm-4">
                                    <input type="date" class="form-control" id="date" placeholder="Date">
                                </div>
                                <div class="col-sm-4">
                                    <input type="time" class="form-control" id="time" placeholder="Time">
                                </div>
                            </div>
                            <div class="form-row mt-2">
                                <div class="col">
                            <button type="button" class="btn btn-secondary ml-auto" id="reserveCancel">Cancel</button>
                            <button type="submit" class="btn btn-primary">Reserve</button>
                                </div>
                            </div>
                    </form>
                </div>   
            </div>
        </div>
    </div>
</div>

и вот Javascript:

<script type="text/javascript">
$('#loginModal').modal({ show: false})
    $('#loginModal').modal(function(){
        $("#loginbutton").click(function(){
            $("#loginModal").modal({
                backdrop: 'static',
                show: false
            });
        }); 
    });

</script>
<script>
    $('#reserveModal').modal({ show: false})
    $('#reserveModal').modal(function(){
        $("#reservebutton").click(function(){
            $("#reserveModal").modal({
                backdrop: 'static',
                show: false
            });
        }); 
    });
</script>

Просто стараюсь сделать это как можно более простым, чтобы я мог сделать это с максимальной ясностью (я новичок в JS :)) Спасибо за ваше время.

Я также хочу отметить, что у меня есть этот код Jquery для карусели в индексе. html с остальным, который работает нормально:

<script>
    $(document).ready(function() {
        $('#mycarousel').carousel({ interval: 2000 });
        $('#carouselButton').click(function() {
            if ($('#carouselButton').children('span').hasClass('fa-pause')){
                $('#mycarousel').carousel('pause');
                $('#carouselButton').children('span').removeClass('fa-pause');
                $('#carouselButton').children('span').addClass('fa-play');
            }
            else if ($('#carouselButton').children('span').hasClass('fa-play')){
                $('#mycarousel').carousel('cycle');
                $('#carouselButton').children('span').removeClass('fa-play');
                $('#carouselButton').children('span').addClass('fa-pause');
            }
        });

});

Answer 1

Bootstrap модальная функция не поддерживает функцию в качестве аргумента, которую вы делаете в теге скрипта, чтобы показать и скрыть модал, вам просто нужно обновить свойство show с помощью аргумента опций модала в Click. Пример кода:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="loginModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" role="content">
          <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Login </h4>
                    <button type="button" class="close" id="btnCloselogin" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-row">
                            <div class="form-group col-sm-4">
                                <label class="sr-only" for="exampleInputEmail3">Email address</label>
                                <input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
                            </div>
                            <div class="form-group col-sm-4">
                                <label class="sr-only" for="exampleInputPassword3">Password</label>
                                <input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
                            </div>
                            <div class="col-sm-auto">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox">
                                    <label class="form-check-label"> Remember me
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>        
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <button id="login">Login</button>
    <button id="reserve">Reserve</button>

    <div id="reserveModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-lg" role="content">
            <div class="modal-content">
                <div class="modal-header">
                    <h1>Reserve a Table</h1>

                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">

                    <div>
                        <form class="inline">
                            <div class="form-group row">
                                <div class="col-sm-3"> 
                                    <label for="exampleInputEmail1">Number of Guests</label>
                                </div>
                                <div class="col-sm-9">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                                        <label class="form-check-label" for="inlineRadio1">1</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                        <label class="form-check-label" for="inlineRadio2">2</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                                        <label class="form-check-label" for="inlineRadio1">3</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                        <label class="form-check-label" for="inlineRadio2">4</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                                        <label class="form-check-label" for="inlineRadio1">5</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                                        <label class="form-check-label" for="inlineRadio2">6</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-row mb-2">
                                <div class="col-sm-3">
                                    <label for="Section">Section</label>
                                </div>
                                <div class="btn-group btn-group-toggle col-sm-4" data-toggle="buttons">
                                    <label class="btn btn-secondary btn-success active">
                                    <input type="radio" name="options" id="option1" autocomplete="off" checked> Non-smoking
                                    </label>
                                    <label class="btn btn-secondary btn-danger">
                                    <input type="radio" name="options" id="option2" autocomplete="off"> Smoking
                                    </label>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="col-sm-3">
                                    <label for="exampleInputPassword1">Date and Time</label>
                                </div>
                                <div class="col-sm-4">
                                    <input type="date" class="form-control" id="date" placeholder="Date">
                                </div>
                                <div class="col-sm-4">
                                    <input type="time" class="form-control" id="time" placeholder="Time">
                                </div>
                            </div>
                            <div class="form-row mt-2">
                                <div class="col">
                            <button type="button" class="btn btn-secondary ml-auto" id="reserveCancel">Cancel</button>
                            <button type="submit" class="btn btn-primary">Reserve</button>
                                </div>
                            </div>
                        </form>
                    </div>   
                </div>
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Jquery код:

$( document ).ready(function() {

    $('#login').on('click', function() {
        $('#loginModal').modal({ show: true });
    });

    $('#reserve').on('click', function() {
        $('#reserveModal').modal({ show: true })
    });
});

Надеюсь, это поможет. :)

Answer 2

Хорошо, давайте разберемся с этим:

Во-первых, вам не нужно объявлять / скрывать модальный bootrstrap при загрузке. В основном .modal уже установлен на отображение: нет; при загрузке страницы. Таким образом, вы можете удалить эту строку:

$('#loginModal').modal({ show: false})

Далее вы хотите показать модальный режим после нажатия определенной кнопки.

$("#loginbutton").click(function(){
     $(".modal").modal('hide'); /* to close other open modals */
     $("#loginModal").modal({
          backdrop: 'static', /* backdrop is set to 'static' if you don't want to close the modal by by clicking outside the modal.  */
          show: true /* it should be set to true, not false so modal will show */
     });
});

Вам не нужно заключать функцию в $('#loginModal').modal(function(){ });. Вместо него * * * * * * * * * * * * * * * * * * * * * * * * * * *

* * * * * * * * * * Таким образом, это должен быть ваш полный сценарий. *

<script type="text/javascript">
$(document).ready(function() {
    $("#loginbutton").click(function(){
        $(".modal").modal('hide'); 
        $("#loginModal").modal({
            backdrop: 'static',
            show: true
        });
    }); 
    $("#reservebutton").click(function(){
        $(".modal").modal('hide'); 
        $("#reserveModal").modal({
            backdrop: 'static',
            show: true
        });
    }); 
}); 
</script>   

Answer 3

Где вы объявляете теги скрипта?

Как правило, вы запускаете сценарий, если хотите, чтобы он запускался для какого-либо события.

Вы также захотите прикрепить обработчики событий при загрузке документа, например:

$(document).ready(function() {
    $("#reservebutton").click(function(){
          $('#reserveModal').dialog('open');
        return false;
    }); 
});