Modali multipli, ridimensionabili e trascinabili

Modali multipli, ridimensionabili e trascinabili postato il 10/04/2020 15:06:31 nel forum programmazione, open source e hosting e modificato da thalimaldor il 10/04/2020 15:08:18

Salve a tutti!
Ho un quesito che mi sta mentalmente distruggendo:
Sto cercando di creare delle finestre modali per la Scheda, Mercato, Lista presenti e quant'altro, però ho necessità che si queste schede possano essere ridimensionate con il mouse, trascinate e soprattutto, che si possano aprire più schede contemporaneamente.

Stiamo utilizzando un codice proprietario e sfruttiamo Aruba come hosting, al momento ho provato unicamente a creare un modale base, praticamente solo il layout. Si apre oscurando tutto ciò che è in background, se clicco fuori dal modale questo si chiude.
Ho fatto varie ricerche sul portale per questo argomento ma senza trovare niente che mi potesse veramente servire.
Potete aiutarmi? Grazie a tutti quelli che vorranno rispondere!
(chiedo perdono ma non riesco a tabbare correttamente il codice qui sul portale)

<div class="modal fade" id="scheda">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-header">
<h4 class="modal-title justify-content-center">Scheda</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>

<div class="modal-body">
QUI IL CONTENUTO DEL MODALE, AL MOMENTO CONTIENE DEL TESTO RANDOM
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>

10/04/2020 16:32:12 e modificato da quod il 10/04/2020 16:33:36

Uhm... quelle classi che usi nei div a quale CSS fanno riferimento? Quello del GDRCD? (premetto che non ho mai usato GDRCD)

A ogni modo, mi pare di capire che stai cercando di ottenere un risultato simile a questo:

https://codepen.io/AleksandrHovhannisyan/pen/RwPYWWB ↗


In tal caso, il relativo tutorial lo trovi qui (è di due settimane fa, più recente di così si muore):

https://dev.to/aleksandrhovhannisyan/multiple-modals-on-one-page-using-html-css-and-javascript-353b ↗

10/04/2020 17:11:01 e modificato da thalimaldor il 10/04/2020 17:15:29

quod ha scritto: quelle classi che usi nei div a quale CSS fanno riferimento? Quello del GDRCD?

Neanche una parte di GDR-CD è stata utilizzata nel codice. Stiamo realizzando da zero. Per i modali abbiamo fatto riferimento a bootstrap.

A ogni modo, mi pare di capire che stai cercando di ottenere un risultato simile a questo:

https://codepen.io/AleksandrHovhannisyan/pen/RwPYWWB ↗

Ho visto anche io quel risultato proprio poco fa. E' simile ma il problema è che il modale non si può spostare, ridimensionare e se si clicca fuori dal modal, questo si chiude. Inoltre genera il nuovo modale all'interno di quello creato prima, non so se con lo stesso procedimento si può aprirne di nuovi anche all'esterno.
Grazie intanto per il tutorial, provo a vedere se funziona!
Testo e ti faccio sapere

10/04/2020 17:19:31

thalimaldor ha scritto: ]

Ti manca dopo tutta la parte javascript (se vuoi farlo in javascript, qua dipende da te) per avere una modale drag and drop o simili.
Puoi cominciare ad informarti dalle basi qua:

https://www.w3schools.com/howto/howto_js_draggable.asp ↗

10/04/2020 17:36:28

auronx ha scritto:

Ti manca dopo tutta la parte javascript (se vuoi farlo in javascript, qua dipende da te) per avere una modale drag and drop o simili.

Ho provato a inserire la pare di javascript nel codice e così pare funzionare, devo solo sistemarlo un po' ora 😀
Sto provando a cercare qualcosa per il ridimensionamento e per creare più modali, sai dove trovare qualcosa anche per quei dilemmi?

10/04/2020 17:50:38

thalimaldor ha scritto: [quote]auronx ha scritto:

Ti manca dopo tutta la parte javascript (se vuoi farlo in javascript, qua dipende da te) per avere una modale drag and drop o simili.

Ho provato a inserire la pare di javascript nel codice e così pare funzionare, devo solo sistemarlo un po' ora 😀
Sto provando a cercare qualcosa per il ridimensionamento e per creare più modali, sai dove trovare qualcosa anche per quei dilemmi?[/quote]

Se non riesci a scrivere in javascript il resize o più modali penso che devi prima cominciare a spolverare un attimo il javascript perché copia ed incolla di script vari aiuta fino ad un certo punto.
Ma per il resize e creare più modali puoi trovare sicuramente su google (scrivendo in inglese trovi più esempi).

10/04/2020 17:53:48 e modificato da gdr-online.com il 10/04/2020 19:07:40

auronx ha scritto:

Se non riesci a scrivere in javascript il resize o più modali penso che devi prima cominciare a spolverare un attimo il javascript

Infatti sto rispolverando quella parte perchè sono piuttosto arrugginito.
Cercavo eventualmente degli script giù fatti sui cui basarmi e far così ritornare la memoria alle "vecchie glorie" 🤣
Proverò comunque a cercare qualcosa online, sicuramente qualcosa salterà fuori!
Le ricerche le faccio sempre in inglese, alla fin fine è l'unica lingua da usare per programmare 😎
Grazie ancora!

10/04/2020 18:12:46 e modificato da auronx il 10/04/2020 18:13:01

thalimaldor ha scritto:

Non è per non cercarli è che devi decidere se farle con Javascript o Jquery ad esempio o con altri sistemi ancora; non sapendo che linguaggio stai usando per costruite la tua land non posso aiutarti ulteriormente sorry

10/04/2020 18:13:55

auronx ha scritto:
Non è per non cercarli è che devi decidere se farle con Javascript o Jquery ad esempio o con altri sistemi ancora; non sapendo che linguaggio stai usando per costruite la tua land non posso aiutarti ulteriormente sorry

Tranquillo nessun problema. Stiamo valutando per bene cosa utilizzare, anche se siamo più improntati verso il javascript

10/04/2020 18:44:37

thalimaldor ha scritto: [quote]auronx ha scritto:
Non è per non cercarli è che devi decidere se farle con Javascript o Jquery ad esempio o con altri sistemi ancora; non sapendo che linguaggio stai usando per costruite la tua land non posso aiutarti ulteriormente sorry

Tranquillo nessun problema. Stiamo valutando per bene cosa utilizzare, anche se siamo più improntati verso il javascript[/quote]

Se siete ancora in una fase abbastanza preliminare da poter decidere cosa utilizzare, posso dire che io per aggiornare il codice di Sigil sto seguendo questo mantra:

- se puoi farlo con solo html5+css, usa quelli
- altrimenti usa il php (supponendo abbiate un server php)
- altrimenti usa javascript

jQuery personalmente non lo prenderei neanche in considerazione, non mi viene in mente praticamente nulla per cui sia indispensabile jQuery (specie se per usarlo bene devi prima rispolverare la sintassi). Personalmente ho epurato quasi tutto il javascript che c'era su Sigil, ormai si fanno cose piuttosto interessanti anche coi css puri.

10/04/2020 18:48:42

quod ha scritto:

Se siete ancora in una fase abbastanza preliminare da poter decidere cosa utilizzare, posso dire che io per aggiornare il codice di Sigil sto seguendo questo mantra:

- se puoi farlo con solo html5+css, usa quelli
- altrimenti usa il php (supponendo abbiate un server php)
- altrimenti usa javascript

Infatti anche noi stiamo cercando di evitare (quando possibile ovviamente) jquery o altro, alleggerendo il più possibile il codice ed evitando strade troppo "tortuose".
Sicuramente utilizzeremo javascript in qualche occasione, ma le stiamo limitando.
In questa occasione, temo che occorra