Popin et modal

La popin est

d'une largeur de 600px
composée d'un titre
d'un bouton de fermeture
d'un contenu

#popin

Popin

Le contenu de la popin est chargé à partir d'une url qu'il convient de mettre dans l'attribut "href" du lien d'ouverture de la popin.

Popin inline Popin ajax

Voir le code

HTML

Pug

a(href='#', data-toggle='modal', data-target='#popin-inline-1') Popin Inline HTML
#popin-inline-1.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
  .modal-dialog
    .modal-content
      .modal-header
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          i.maificon.maificon-close
        .modal-title Titre popin Inline exemple
      .modal-body
        p Contenu popin Inline exemple

Pug

a(href='#', data-toggle='modal', data-target='#popin-inline-2', data-closable='false') Popin Inline HTML NoClosable
#popin-inline-2.modal.fade(tabindex='-1', role='dialog', aria-hidden='true', data-backdrop='static', data-keyboard='false')
  Contenu de la popin

Pug

a(href='javascript:$.openPopin({type:"inline",target:"#popin-inline-3"})') Popin Inline JS
#popin-inline-3.modal.fade(tabindex='-1', role='dialog', aria-hidden='true')
  Contenu de la popin

Pug

a(href='javascript:$.openPopin({type:"inline",target:"#popin-inline-4",closable:false})') Popin Inline JS NoClosable
#popin-inline-4.modal.fade(tabindex='-1', role='dialog', aria-hidden='true', data-backdrop='static', data-keyboard='false')
  Contenu de la popin

Voir le code

HTML

Pug

a(href='popin-ajax-example.html', data-toggle='modal') Popin AJAX HTML

Pug

a(href='popin-ajax-example.html', data-toggle='modal', data-closable='false') Popin AJAX HTML NoClosable

Pug

a(href='javascript:$.openPopin({url:"popin-ajax-example.html"})') Popin AJAX JS

Pug

a(href='javascript:$.openPopin({url:"popin-ajax-example.html", closable:false})') Popin AJAX JS NoClosable

HTML

#popin-integree-aux-labels

Popin intégrée aux labels

Sur le même principe que précédemment, 6 options sont disponibles dans le theme struts pour tous les inputs (textarea, textfield, password, listboxes, checkboxes...).

popinLabelLink: lien ajax vers la popin du label.
popinLabelDivId: id de la div popin label.
popinLabelTitleLink: lien ajax vers la popin du label title.
popinLabelTitleDivId: id de la div popin label title.
popinSublabelLink: lien ajax vers la popin du sous label.
popinSublabelDivId: id de la div popin sous label.

Les options popinLabelLink, popinLabelTitleLink et popinSublabelLink sont facultatives (à n'utiliser que dans le cas AJAX)

Voir le code

HTML