用弹窗的方式解决登陆后跳回原页面的问题

用弹窗的方式解决登陆后跳回原页面的问题

由于某些原因,需要用户在登录后才能跳转到下一个页面,下面提供一种方法解决这个问题,这里需要用到模态框（Modal）插件.
如果您想要单独引用该插件的功能，那么您需要引用 modal.js。您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
modal简介可以参照https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
如下图

这是需要写一个弹窗登录代码如下

<!--fade为弹窗出来后的阴影-->
<div class="modal fade" id="modalModify">
<!--声明此div为一个dialog-->
        <div class="modal-dialog" >
        <!--此div为内容部分-->
            <div class="modal-content">
            <!--头部-->
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">X</button>
                    <h4 class="modal-title">请登录：</h4>
                </div>
                <!--身体-->
                <div class ="modal-body" >
                    <div class="input-group" id="modal1">
                        <span class="input-group-addon">TEL:</span>
                        <input class="input-sm" type="text" id="tel" placeholder="请输入登录手机号" v-model="user.tel"/>
                    </div>
                    <br/>
                    <div class="input-group" id="modal2">
                        <span class="input-group-addon">password:</span>
                        <input class="input-sm" type="text" id="password" placeholder="请输入密码" v-model="user.password"/>
                    </div>
                    <br/>
                </div>
                <!--尾部-->
                <div class = "modal-footer">
                    <button type="button" class="btn btn-primary" id="denglu">登录</button>
                    <button type="button" class="btn btn-default" data-dismiss ="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

弹出效果如下:

后端部分就不写了,如果帮助到你,请点一个赞,给我鼓励