javascript - 登录对话框未正确显示 - alertifyjs

Question

我正在按照示例使用 alertifyjs 创建登录表单，但是，即使遵循完全相同的代码，我也会得到不同的输出，这与我在 alertify 网站本身上运行示例时显示的内容相反。

https://alertifyjs.com/examples.html - 无按钮通用对话框

请有人帮助我，因为我不太确定我错过了什么

我把它粘贴到我的 HTML 中

<!-- the form to be viewed as dialog-->
<form id="loginForm">
    <fieldset>
        <label> Username </label>
        <input type="text" value="Mohammad"/> 

        <label> Password </label>
        <input type="password" value="password"/> 

        <input type="submit" value="Login"/>
    </fieldset>
</form>

这在我的javascript中

alertify.genericDialog || alertify.dialog('genericDialog',function(){
    return {
        main:function(content){
            this.setContent(content);
        },
        setup:function(){
            return {
                focus:{
                    element:function(){
                        return this.elements.body.querySelector(this.get('selector'));
                    },
                    select:true
                },
                options:{
                    basic:true,
                    maximizable:false,
                    resizable:false,
                    padding:false
                }
            };
        },
        settings:{
            selector:undefined
        }
    };
});
//force focusing password box
alertify.genericDialog ($('#loginForm')[0]).set('selector', 'input[type="password"]');

我得到的输出：

我正在使用以下链接将 alertify 库加载到我的项目中

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/alertify.min.css"/>
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/css/themes/bootstrap.min.css"/>

 <script src="//cdn.jsdelivr.net/npm/alertifyjs@1.11.1/build/alertify.min.js"></script>

输出应如下所示：