CAULNES, France

Ajouter une icône/une boîte d'informations en plus des étiquettes de formulaire dans Voxel Child

Ajouter une icône/une boîte d’informations en plus des étiquettes de formulaire dans Voxel Child

Important : Uniquement compatible avec le thème WordPress : Voxel

  • Vous devez d’abord créer un fichier “bio-modal.js” dans le dossier enfant sous le dossier js.
  • Ajoutez quelque chose comme ceci (vous devez vérifier le sélecteur pour l’étiquette du champ et remplacez-le) :
    *Sélecteur : .ts-form-group.field-key-description > label
				
					// Show/hide BIO/DESCRIPTION modal
jQuery(document).ready(function($) {
  // Inject the bio info icon
  $('.ts-form-group.field-key-description > label').each(function() {
    var label = $(this);
    var smallElement = label.find('small');

    if (smallElement.length > 0) {
      smallElement.append('<span id="bio-info" class="modal-info-icon" title="How to create a perfect Bio/Description?"><i class="las la-info-circle"></i></span><div id="bio-info-modal" class="info-modal hidden"><h3>How to create a perfect Bio/Description?</h3><p>Creating the perfect bio/description is all about expressing yourself.</p><a href="#" target="_blank">Learn More</a>');
    } else {
      label.append('<span id="bio-info-info" class="modal-info-icon" title="How to create a perfect Bio/Description?"><i class="las la-info-circle"></i></span><div id="bio-info-modal" class="info-modal hidden"><h3>How to create a perfect Bio/Description?</h3><p>Creating the perfect bio/description is all about expressing yourself</p><a href="#" target="_blank">Learn More</a>');
    }
  });

  // Show/hide modal and toggle icon color
  $(document).on('click', '#bio-info', function() {
    var infoIcon = $('#bio-info');
    var modal = $('#bio-info-modal');

    modal.toggleClass('hidden');
    infoIcon.toggleClass('active');
  });
});
				
			
  • Ensuite, sur le modèle de publication de création, vous devez ajouter ce qui suit dans un module de code HTML :
				
					
				
			
  • Et pour finir, quelques idées de style que vous pouvez adapter à vos besoins :
				
					/* Info Modals */
.modal-info-icon {
  position: relative;
  cursor: pointer;
	color: #303030;
	padding-left: 7px;

}

/* Active style for the icon */
.modal-info-icon.active {
  color: #000;
}
.modal-info-icon:hover .modal-tooltip {
  opacity: 1;
}
.info-modal {
  position: relative;
  z-index: 9999;
  background-color: #fff;
  border: 1px solid #ccc;
	border-radius: 6px;
  padding: 10px;
}
.info-modal h3 {
  font-size: 16px;
  margin-top: 0;
}
.info-modal p {
  margin-bottom: 10px;
	font-size: 12px;
}
.info-modal a {
  color: #000;
  text-decoration: underline;
}
				
			
Sylvain_LC
Sylvain_LC
CEO & Fondateur de Powerstreet Groupe
powerstreet.io

CEO & Fondateur de Powerstreet Groupe. Passionné de nouvelles technologies.

Articles Similaires
Laisser un commentaire

Your email address will not be published.Required fields are marked *