登录对话框显示不正确-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>

输出应如下所示：