Я использую следующий пример для создания формы входа в систему с использованием 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](https://i.stack.imgur.com/C3BfM.png)
Я использую следующие ссылки для загрузки библиотеки оповещений в мой проект
<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](https://i.stack.imgur.com/jzZrm.png)