Диалоговое окно входа не отображается должным образом - alerttifyjs - PullRequest
0 голосов
/ 02 июля 2018

Я использую следующий пример для создания формы входа в систему с использованием alerttifyjs, однако, даже следуя точно такому же коду, я получаю другой вывод, отличный от того, который отображается при запуске образца на самом сайте alerttify.

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"]');

Вывод, который я получаю:

enter image description here

Я использую следующие ссылки для загрузки библиотеки оповещений в мой проект

<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>

Вывод должен быть таким, как показано ниже: enter image description here

...