Popup
Qual è la funzione di questo widget?
Il widget Popup è un widget contenitore di base che può essere utilizzato come popup/overlay modale o non modale per visualizzare avvisi, avvertenze o raccogliere gli input dell'utente senza passare a un'altra vista.
Quando va utilizzato questo widget?
Utilizzare un widget Popup nei casi indicati di seguito.
• Si desidera mostrare avvisi o informazioni importanti all'utente che visualizza un'esperienza prima che quest'ultimo prosegua nella navigazione.
• Si desidera inserire un pulsante o una casella di controllo nel popup per assicurarsi che l'utente che visualizza l'esperienza confermi di avere preso visione delle informazioni.
• Si desidera limitare il testo all'interno della vista dell'esperienza, facendo in modo che le informazioni siano comunque disponibili. In questo caso, è possibile utilizzare un semplice pulsante "Ulteriori informazioni" che, una volta premuto, mostri un popup contenente informazioni più dettagliate.
Sono disponibili proprietà, servizi, eventi o azioni speciali?
Per visualizzare un elenco di proprietà, servizi ed eventi comuni a più widget, vedere Proprietà, servizi ed eventi comuni a più widget.
Le seguenti tabelle riportano un elenco di proprietà, servizi ed eventi specifici di questo widget.
|
Proprietà
|
JavaScript
|
Tipo
|
Descrizione
|
|---|---|---|---|
|
Tipo
|
type
|
string
|
Selezionare il tipo di popup da includere tra quelli elencati di seguito.
• Popup mobile
• Modale
|
|
Centrato
|
centered
|
boolean
|
Quando questa casella di controllo è selezionata, il popup viene centrato rispetto al centro orizzontale e verticale dello schermo. Se questa casella di controllo non è selezionata, vengono visualizzate le seguenti proprietà aggiuntive:
• In alto (px, %, em, vh)
• In basso (px, %, em, vh)
• A sinistra (px, %, em, vh)
• A destra (px, %, em, vh)
|
|
In alto (px, %, em, vh)
|
top
|
string
|
Imposta l'attributo HTML style dell'elemento e consente di impostare una posizione fissa in alto espressa in unità (px, %, vw, vh, ecc.).
|
|
In basso (px, %, em, vh)
|
bottom
|
string
|
Imposta l'attributo HTML style dell'elemento e consente di impostare una posizione fissa in basso espressa in unità (px, %, vw, vh, ecc.).
|
|
A sinistra (px, %, em, vh)
|
left
|
string
|
Imposta l'attributo HTML style dell'elemento e consente di impostare una posizione fissa a sinistra espressa in unità (px, %, vw, vh, ecc.).
|
|
A destra (px, %, em, vh)
|
right
|
string
|
Imposta l'attributo HTML style dell'elemento e consente di impostare una posizione fissa a destra espressa in unità (px, %, vw, vh, ecc.).
|
|
Servizio
|
JavaScript
|
Descrizione
|
|---|---|---|
|
Nascondi popup
|
hidepopup
|
Servizio associabile che consente di nascondere il popup.
|
|
Mostra popup
|
showpopup
|
Servizio associabile che consente di mostrare il popup.
|
Con questo widget sono disponibili le seguenti azioni:
• Nascondi nell'area di lavoro
• Mostra nell'area di lavoro
Come funziona il widget
Ecco un esempio dell'aspetto che potrebbe avere il widget.
|
Passi fondamentali richiesti per l'uso
|
Come si presenta
|
||||
|---|---|---|---|---|---|
1. Trascinare e rilasciare un widget Popup nell'area di lavoro.
2. Trascinare e rilasciare i widget che si desidera visualizzare nel popup.
3. Assicurarsi di creare un modo per chiudere il popup aggiungendo un widget con un evento Clic al popup (ad esempio, un'etichetta o un pulsante). Associare l'evento Clic di tale widget al widget Popup e selezionare Nascondi popup nella finestra Seleziona destinazione associazione.
|
 |
Definire lo stile del widget con CSS
Per definire lo stile del widget è possibile utilizzare CSS. Quello che segue è un esempio di classe CSS che è possibile creare e applicare:
 |
È consigliabile assegnare nomi univoci alle classi in modo che non siano in conflitto con altre classi o proprietà predefinite.
|
|
Esempio CSS
|
Come si presenta
|
|---|---|
.ptc-popup {
|
 |
Per ulteriori informazioni sull'implementazione delle classi CSS, vedere Stili dell'applicazione.