Boîte de dialogue jQuery UI réactive (et un correctif pour le bug maxWidth)
Avec de nombreux sites exploitant l'interface utilisateur de jQuery, certaines lacunes majeures doivent être surmontées, car l'interface utilisateur de jQuery ne prend pas en charge la conception réactive et il existe un bogue de longue date lorsque maxWidth est utilisé avec width:'auto'.
La question reste donc de savoir comment rendre jQuery UI Dialog réactif?
Voici comment j'ai réalisé un dialogue réactif jQuery UI.
Pour ce faire, j'ai ajouté une nouvelle option à la config - fluid: true, qui dit de rendre le dialogue réactif.
J'attrape ensuite les événements de redimensionnement et d'ouverture de boîte de dialogue, pour modifier la largeur maximale de la boîte de dialogue à la volée, et repositionner la boîte de dialogue.
Vous pouvez le voir en action ici: http://codepen.io/jasonday/pen/amlqz
S'il vous plaît examiner et publier des modifications ou des améliorations.
// Demo: http://codepen.io/jasonday/pen/amlqz
// [email protected]
$("#content").dialog({
width: 'auto', // overcomes width:'auto' and maxWidth bug
maxWidth: 600,
height: 'auto',
modal: true,
fluid: true, //new option
resizable: false
});
// on window resize run function
$(window).resize(function () {
fluidDialog();
});
// catch dialog if opened within a viewport smaller than the dialog width
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
fluidDialog();
});
function fluidDialog() {
var $visible = $(".ui-dialog:visible");
// each open dialog
$visible.each(function () {
var $this = $(this);
var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
// if fluid option == true
if (dialog.options.fluid) {
var wWidth = $(window).width();
// check window width against dialog width
if (wWidth < (parseInt(dialog.options.maxWidth) + 50)) {
// keep dialog from filling entire screen
$this.css("max-width", "90%");
} else {
// fix maxWidth bug
$this.css("max-width", dialog.options.maxWidth + "px");
}
//reposition dialog
dialog.option("position", dialog.options.position);
}
});
}
MODIFIER
Méthode mise à jour: https://github.com/jasonday/jQuery-UI-Dialog-extended
Le référentiel ci-dessus comprend également des options pour:
- Cliquez en dehors de la boîte de dialogue pour fermer
- Masquer la barre de titre
- masquer le bouton de fermeture
- responsive (à adresser ci-dessus)
- échelle largeur et hauteur pour réactif (ex: 80% de la largeur de la fenêtre)
Régler maxWidth sur create fonctionne bien:
$( ".selector" ).dialog({
width: "auto",
// maxWidth: 660, // This won't work
create: function( event, ui ) {
// Set maxWidth
$(this).css("maxWidth", "660px");
}
});
Pas besoin de jQuery ou Javascript. CSS résout tout pour cela.
Ceci est ma solution de projet pour une boîte de dialogue JQuive réactive. Largeur et hauteur par défaut, puis largeur et hauteur maximales aussi petites que le navigateur se réduit. Nous avons ensuite flexbox pour que le contenu s'étende sur la hauteur disponible.
Fiddle: http://jsfiddle.net/iausallc/y7ja52dq/1/
MODIFIER
Technique de centrage mise à jour pour prendre en charge le redimensionnement et le glissement
.ui-dialog {
z-index:1000000000;
top: 0; left: 0;
margin: auto;
position: fixed;
max-width: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
}
.ui-dialog .ui-dialog-content {
flex: 1;
}
J'ai rassemblé ces codes auprès de plusieurs sources et je les ai rassemblés. C’est ainsi que j’ai imaginé un dialogue réactif jQuery UI. J'espère que cela t'aides..
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>jQuery UI Dialog - Modal message</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#dialog-message").dialog({
modal: true,
height: 'auto',
width: $(window).width() > 600 ? 600 : 'auto', //sets the initial size of the dialog box
fluid: true,
resizable: false,
autoOpen: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$(".ui-dialog-titlebar-close").hide();
});
$(window).resize(function() {
$("#dialog-message").dialog("option", "position", "center"); //places the dialog box at the center
$("#dialog-message").dialog({
width: $(window).width() > 600 ? 600 : 'auto', //resizes the dialog box as the window is resized
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Responsive jQuery UI Dialog">
<p style="font-size:12px"><b>Lorem Ipsum</b></p>
<p style="font-size:12px">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque sagittis eu turpis at luctus. Quisque
consectetur ac ex nec volutpat. Vivamus est lacus, mollis vitae urna
vitae, semper aliquam ante. In augue arcu, facilisis ac ultricies ut,
sollicitudin vitae tortor.
</p>
</div>
</body>
</html>
Je ne suis pas sûr que ma solution simple résolve le problème de cette question, mais cela fonctionne pour ce que j'essaie de faire:
$('#dialog').dialog(
{
autoOpen: true,
width: Math.min(400, $(window).width() * .8),
modal: true,
draggable: true,
resizable: false,
});
C'est-à-dire que la boîte de dialogue s'ouvre avec une largeur de 400 px, sauf si la largeur de la fenêtre nécessite une largeur inférieure.
Non réactif en ce sens que si la largeur est réduite, le dialogue est réduit, mais réactif en ce sens que sur un périphérique spécifique, le dialogue ne sera pas trop large.
J'ai réussi à établir un dialogue réactif avec les anciens
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
comme ça
var dWidth = $(window).width() * 0.9;
var dHeight = $(window).height() * 0.9;
$('#dialogMap').dialog({
autoOpen: false,
resizable: false,
draggable: false,
closeOnEscape: true,
stack: true,
zIndex: 10000,
width: dWidth,
height: dHeight,
modal: true,
open:function () {
}
});
$('#dialogMap').dialog('open');
Redimensionnez la fenêtre sur JSFiddle result et cliquez sur "Exécuter".
$("#content").dialog({
width: 'auto',
create: function (event, ui) {
// Set max-width
$(this).parent().css("maxWidth", "600px");
}
});
Cela a fonctionné pour moi
Si votre site est limité à une taille maximale, l'approche ci-dessous fonctionnera .Attachez un style CSS à votre boîte de dialogue.
.alert{
margin: 0 auto;
max-width: 840px;
min-width: 250px;
width: 80% !important;
left: 0 !important;
right: 0 !important;
}
$('#divDialog').dialog({
autoOpen: false,
draggable: true,
resizable: true,
dialogClass: "alert",
modal: true
});
Je viens de trouver une solution à ce problème.
J'ai collé mon style css, j'espère que cela pourra aider quelqu'un
.ui-dialog{
position: fixed;
left: 0 !important;
right: 0 !important;
padding: rem-calc(15);
border: 1px solid #d3dbe2;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: rem-calc(620);
top: rem-calc(100) !important;
margin: 0 auto;
width: calc(100% - 20px) !important;
}
J'ai réussi à faire un dialogue réactif comme celui-ci. Parce que utiliser% sur maxWidth avait l’air bizarre.
var wWidth = $(window).width();
var dWidth = wWidth * 0.8;
$('.selector').dialog({
height: 'auto',
width: 'auto',
create: function(){
$(this).css('maxWidth', dWidth);
}
});
Merci, cela rend réactif, mais il y avait toujours un problème avec le dialogue étant excentré car mon contenu (modèle de formulaire Django) était chargé après l'ouverture du dialogue. Donc, au lieu de $( "#my-modal" ).load(myurl).dialog("open" );, j'appelle $( "#my-modal" ).dialog("open" );. Ensuite, dans la boîte de dialogue, j'ajoute l'option 'open' et appelle une charge, puis votre fonction fluidDialog():
dans les options de dialogue (modal, fluide, hauteur, etc.):
open: function () {
// call LOAD after open
$("#edit-profile-modal").load(urlvar, function() {
// call fluid dialog AFTER load
fluidDialog();
});
Merci pour les messages! Cela m'a fait gagner beaucoup de temps.
Je voudrais aussi ajouter, cependant, que je commençais à avoir un positionnement génial lorsque la boîte de dialogue s’est ouverte pour la première fois sur certaines tailles d’écran. Si vous rencontrez une telle erreur, essayez de faire quelque chose comme ceci:
if (wWidth < dialog.options.maxWidth + 50) {
// keep dialog from filling entire screen
$this.css("max-width", "90%");
// ADDED
$this.css("left", "5%");
} else {
// fix maxWidth bug
$this.css("max-width", dialog.options.maxWidth);
// ADDED
var mLeft = (wWidth - dialog.options.maxWidth) / 2;
$this.css("left", mLeft + "px");
}
Espérons que cela sauve un mal de tête =)
La solution acceptée est plutôt boguée et trop sophistiquée. Je suis venu avec dialogue Resize qui est plus propre et plus simple pour mes besoins.
Implémenter comme suit:
$("#dialog").dialogResize({
width: 600,
height: 400,
autoOpen: true,
modal: true
});