Comment forcer une fenêtre modale Kendo UI à centrer dans une page? et comment désactiver toutes les actions?
J'essaie d'afficher une fenêtre modale Kendo UI au centre du navigateur, mais elle continue à apparaître en bas de la page, par ceci je veux dire la seule partie visible de la fenêtre est la barre supérieure, le reste de la fenêtre est hors de vue, seulement quand vous le faites glisser vous pouvez le voir correctement. Je n'ai aucun style appliqué à la div qui est utilisée pour la fenêtre, donc je suis confus quant à la raison pour laquelle elle est montrée comme ça.
Aussi, je veux désactiver tout le bouton d'action sur la barre supérieure de la fenêtre, a essayé de définir un tableau d'action vide mais un bouton de fermeture est affiché par défaut, y a-t-il un moyen d'afficher simplement le titre de la fenêtre sur la barre supérieure? Je veux que la fenêtre disparaisse quand un bouton est cliqué.
Voici comment je crée la fenêtre:
var accessWindow = $("#accessDiv").kendoWindow({
actions: [],
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Access",
width: "500px"
});
accessWindow.center();
accessWindow.open();
C'est mon div avec seulement une étiquette, une entrée et un bouton, aucun CSS n'y est appliqué pour le moment:
<div id="accessDiv" style=" width: 100%; height: 100%; background-color: #fff;">
<label>Enter access key</label>
<input type="text" />
<input type="button" title="Enter" value="Enter" />
</div>
5 réponses
Avez-vous essayé de le cacher, puis de le centrer et de l'ouvrir?
var accessWindow = $("#accessDiv").kendoWindow({
actions: {}, /*from Vlad's answer*/
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Access",
width: "500px",
visible: false /*don't show it yet*/
}).data("kendoWindow").center().open();
À Partir de: http://www.kendoui.com/forums/ui/window/kendowindow-center-doesn-t-work-when-inside-an-iframe.aspx
Les deux dernières lignes doivent se lire comme suit:
accessWindow.data("kendoWindow").center();
accessWindow.data("kendoWindow").open();
1.Vous devez échanger les deux dernières lignes de code. Tout d'abord, vous devez ouvrir la fenêtre et ensuite, vous pouvez centrer.
2.To afficher la fenêtre sans aucune action, vous devez passer l'objet vide:
actions: {}
Ci-dessous fonctionne pour moi. Si vous ne l'aimez pas en tant que modal, définissez-le sur false ou supprimez-le.
var window = $("#addBlacklistWind");
$("#btnAddBlacklist").bind("click", function () {
window.data("kendoWindow").center().open();
});
window.kendoWindow({
width: "800px",
title: "Add New Blacklist",
modal: true,
visible: false,
actions: [
"Maximize",
"Close"
]
});
Vous pouvez vous référer au code suivant pour positionner votre fenêtre.
var accessWindow = $("#accessDiv").kendoWindow({
elem:
draggable: true,
modal: true,
title: "Title",
width:500,
visible: false,
position:{
top:"15%",
left:"35%"
},
}).data("kendoWindow").open();
Si vous voulez position fixe, indépendamment de tailles de l'écran, puis utilisez
position:{
top:"20px",
left:"100px"
}
Mais si vous voulez ajuster la position de votre fenêtre relativement , en haut et à gauche '%' travaillera pour vous.