Redimensionnement modale

[Xav-74]

Hello @kiboost

Petite question concernant les modales et leur taille. Je souhaiterai fixer la hauteur et la largeur à l’ouverture. Je fais donc :

<script>
	$('.cmd[data-cmd_id=#sendPOI_id#]').on('click', function () {
		$('#md_modal').dialog({
				title: "Envoi POI",
				width: 500,
				height: 240,
		});
	     $('#md_modal').load('index.php?v=d&plugin=myBMW&modal=SendPOI.myBMW&eqLogic_id='+'#id#').dialog('open');
	});
</script>

Mais la hauteur et la largeur ne sont pas prise en compte. Un souci de cache ?
Merci de ton aide,

Xav

[Xav-74]

Hello à tous,

Personne n’a une petite idée ?
Merci d’avance,

Xav

[Salvialf]

Salut,

Ca fait longtemps que je n’ai pas joué avec les tailles de modale mais je dirais que c’est le core qui set la taille de #md_modal.

A mon avis, si tu veux personnaliser la taille, il faut que tu écrive ta propre modale.

Dans Pimp my jeedom j’ai une modale custom contenant peu d’infos, en dehors de la div row dans desktop/pluginId.php :

</div><!--/.row row-overflow-->

<!-- Modale create widget -->
<div id="md_widgetCreatePimp" style="overflow-x: hidden;">
<!-- Contenu de la modale -->
</div>

Dans desktop/pluginId.js :

$("#md_widgetCreatePimp").dialog({
  closeText: '',
  autoOpen: false,
  modal: true,
  height: 310,
  width: 400,
  position: { my: 'top', at: 'top+150' },
  open: function () {
    $("body").css({overflow: 'hidden'});
  },
  beforeClose: function (event, ui) {
    $("body").css({overflow: 'inherit'});
  }
})

Et l’appel pour l’ouverture de la modale :

$('#md_widgetCreatePimp').dialog({title: "{{Créer un widget}}"}).dialog('open')

A voir si ça aide et à adapter à ton cas d’usage bien sûr

[Xav-74]

Merci bcp ! Je regarde ça ce soir

EDIT : par contre je peux appeler mon fichier pluginID.js depuis mon widget ?

[ajja17orange]

bonjour, de se que je comprends le modal c’est le cadre, il était auto reize. l’intérieur du cadre (le contenant) peut déterminé la taille.

exemple avec un historique :

si je modifie le cadre le contenant ne change pas.

c’etait pour m’amuser. (non fini avec idée d’utiliser des %) ça mets le bazar dans les modal de la page qu’il faut ensuite attitré mais la base est là.

<style>
  /* le contenant "historique" */
  .ui-dialog-content,.ui-widget-content{ 
  position: absolute!important;
    top: 30px!important;
    height: 655px!important;
    width: 1093px!important;
    
           }
    /* le cadre  */
.cadre {
  position: absolute!important;
    height: 700px!important;
    width: 1110px!important;
    top: 53.5px!important;
         }
  
</style>
<a style="font-size:20px;" class="test">clic ouvre l'historique</a>
<script>
  
   $(function() {
            $( "#md_modal2" ).dialog({
  
             	dialogClass:"cadre",
    //           resize: function( event, ui ) {
    //              $( this ).dialog( "option",
	//         ui.size.height + " x " + ui.size.width );
    //           }
            });
  $('.test').off('click').on('click', function () {
  $("#md_modal2").load('index.php?v=d&modal=cmd.history&id=838').dialog("open");
            });
         });

</script>

[ktn]

Je ne sais plus très bien où j’ai trouvé le source qui m’a inspiré (quelque part dans le core je crois) mais voici une méthode que j’utilise:

$('.accountAction[data-action=add]').off('click').on('click', function() {
	if ($('#mod_selectAccountModel').length == 0) {
		$('body').append('<div id="mod_selectAccountModel" title="{{Sélection d\'un modèle}}"/>');
		$("#mod_selectAccountModel").dialog({
			closeText: '',
			autoOpen: false,
			modal: true,
			height:200,
			width:300
		});
		jQuery.ajaxSetup({async: false});
		$('#mod_selectAccountModel').load('index.php?v=d&plugin=EVcharger&modal=selectAccountModel');
		jQuery.ajaxSetup({async: true});
	}
	$('#mod_selectAccountModel').dialog('option', 'buttons', {
		"{{Annuler}}": function () {
			$(this).dialog("close");
		},
		"{{Valider}}": function () {
			$(this).dialog("close");
			editAccount(selectAccountModel('result'));
		}
	});
	$('#mod_selectAccountModel').dialog('open');
});

[Xav-74]

Merci à tous pour votre aide !

Finalement en passant par le css avec des « !important » sur le cadre, ca force la bonne taille :
(Merci @ajja17orange )

.cadre_modal {
	position: absolute!important;
	height: 240px !important;
	width: 450px !important;
}

avec :

$('.cmd[data-cmd_id=#sendPOI_id#]').on('click', function () {
	$('#md_modal').dialog({
						title: "Envoi POI",
						dialogClass:"cadre_modal",
  					});
	$('#md_modal').load('index.php?v=d&plugin=myBMW&modal=SendPOI.myBMW&eqLogic_id='+'#id#').dialog('open');
						});

Xav

[Xav-74]

Par contre tu as raison @ajja17orange ça joue sur toutes les modales de la page en cours. Il faut que je regarde comment attitrer cela du coup !

[Xav-74]

Bon finalement j’ai utilisé la méthode de @ktn qui équivaut à celle de @Salvialf.
Comme ca je ne perturbe pas les modales du core.
Simple et efficace ! Merci