모달 외부 JSP에서 불러오기

부트스트랩 버전에 따라 remote를 사용하는 것이 불가능해졌기에 jqury의 load를 사용하여 불러온다.

 

모달 불러오는 버튼

                                    <a id="login" data-toggle="modal" data-target="#modal" role="button">
                                            <i class="material-icons">lock</i></a>

모달 불러오려는 화면

<div id="modal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
        </div>
    </div>
</div>

위 화면의 자바스크립트

    $(".modal-content").load("/loginModal");

 

외부 JSP

<div class="card align-middle">
    <div class="card-title">
        <h2 class="card-title text-center">Login</h2>
    </div>
    <div class="card-body">
        <form method="post">
            <h5 class="form-signin-heading">Sign in</h5>
            <label class="sr-only">Your ID</label>
            <input type="text" id="uid" class="form-control" placeholder="ID" required autofocus><BR>
            <label class="sr-only">Password</label>
            <input type="password" class="form-control" placeholder="Password" required><br>
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="remember-me"> remember me
                </label>
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Sing in</button>
        </form>

    </div>
</div>

 

Controller

    @GetMapping("/loginModal")
    public String loginModal() {
        return "/member/loginModal";
    }