HTML页面实现弹出框输入支付密码

前端代码，样式，js

<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!--    支付密码框-->
    <link rel="stylesheet" th:href="@{//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css}">
    <style>
        #dialog-form input {
            display: block;
        }

        input.text {
            margin-bottom: 12px;
            width: 95%;
            padding: .4em;
        }

        fieldset {
            padding: 0;
            border: 0;
            margin-top: 25px;
        }

        h1 {
            font-size: 1.2em;
            margin: .6em 0;
        }
    </style>
    <script th:src="@{https://code.jquery.com/jquery-1.12.4.js}"></script>
    <script th:src="@{https://code.jquery.com/ui/1.12.1/jquery-ui.js}"></script>
    <script>
        $(function () {
            var dialog, form,
                password = $("#password"),
                tips = $(".validateTips");

            function ordersSubmit() {
                var str = password.val();
                dialog.dialog("close");
                $.ajax({
                    type: "get",
                    url: "/cart/toOrdersOne",
                    data: {
                        payPwd: str
                    },
                    success(data) {
                     if (data === '密码错误') {
                            alert("密码输入错误");
                        } else if (data === '余额不足') {
                            alert("余额不足，请联系管理员充值");
                        } else {
                            layer.msg(data, {icon: 1, anim: 1});
                            setTimeout(function () {
                                location.href = "/user/status/1";
                            }, 1000)
                        }
                    },
                    error() {
                        alert("ajax配置有错，请检查url与type是否正确");
                    }
                });
            }

            dialog = $("#dialog-form").dialog({
                autoOpen: false,
                height: 230,
                width: 350,
                modal: true,
                buttons: {
                    "支付": ordersSubmit,
                    "取消": function () {
                        dialog.dialog("close");
                    }
                },
                close: function () {
                    form[0].reset();
                }
            });
            form = dialog.find("form").on("submit", function (event) {
                event.preventDefault();
                ordersSubmit();
            });

            $("#create-user").button().on("click", function () {
                dialog.dialog("open");
            });
        });
    </script>

定义弹出框div信息

<div tabindex="-1" role="dialog" aria-describedby="dialog-form" aria-labelledby="ui-id-1"
     style="position: absolute; height: auto; width: 350px; top: 0px; left: 581px; display: none; z-index: 101;">
    <div id="dialog-form" class="ui-dialog-content ui-widget-content"
         style="width: auto; min-height: 0px; max-height: none; height: 100px;">
        <p class="validateTips">请输入支付密码：</p>
        <form>
            <fieldset>
                <input type="password" name="password" id="password" class="text ui-widget-content ui-corner-all">
                <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
            </fieldset>
        </form>
    </div>
</div>

后台部分代码

@ResponseBody
    @Transactional
    @RequestMapping("toOrdersOne")
    public String toOrdersOne(String payPwd, HttpSession session) {
    }