点击均触发两种模式

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>[phone]</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还是陌生的：））谢谢您的时间。

Answer 1

您在哪里声明脚本标签？

[通常，如果要针对某个事件运行脚本，将运行该脚本。

您还希望在加载文档时附加事件处理程序，例如：

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

Answer 2

Bootstrap模态函数不支持在脚本标记中执行的作为参数的函数，以显示和隐藏模态，您只需要通过单击Click上的模态的options参数来更新show属性。示例代码：

<!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 })
    });
});

希望这会有所帮助。 ：）