Modal Base: No Title No Footer

See "img upload" in sidebar snet/molecules for variants, or go to info panel and look for it in "references" (@snet-img-upload)

Refer to modal frame found in view tab for complete structure without content.

A modal's default size is 640px

Modifier classes for modals

  • modal-sm: 480px
  • modal-md: 720px (mainly used for modals containing images)
  • modal-lg: 896px
  • modal-xl: 1120px

Content loading

A modal with a content loading component behaves as follows:

  • It has a second body element with the -isLoading class that is hidden by default, and shown only when ...
  • ... the -contentLoading modifier is applied to the modal element ...
  • ... which in turn hides the regular modal body element which into which the content is injected
<div class="sds-modal modal fade" id="speedinvestMoreInfoModal" aria-hidden="true" tabindex="-1">
    <div class="sds-modal__dialog modal-dialog modal-dialog-centered">
        <div class="sds-modal__content modal-content">

            <div class="sds-modal__header modal-header">

                <button type="button" class="sds-btn -iconBtn -btnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Close">

                    <span class="sds-icon sds-icon-close"></span>

                </button>

            </div>

            <div class="sds-modal__body modal-body">

                <div class="sds-stackXl">
                    <div class="sds-stackXs">
                        <div class="h3">Calculs Gains journaliers</div>
                        <p>La classification des produits financiers est celle opérée par la norme comptable IFRS 7.
                            Elle distingue trois types d’instruments financiers en fonction de la disponibilité et de la liquidité
                            des éléments de valorisation. Le premier niveau se caractérise par un prix disponible directement (prix
                            de marché) et une liquidité suffisante. La deuxième regroupe les produits qui peuvent être valorisés par
                            un modèle standard et des données cotées.</p>
                    </div>
                    <div class="sds-stackXs">
                        <div class="h3">Calculs Gains totaux</div>
                        <p>La classification des produits financiers est celle opérée par la norme comptable IFRS 7.
                            Elle distingue trois types d’instruments financiers en fonction de la disponibilité et de la liquidité
                            des
                            éléments de valorisation. Le premier niveau se caractérise par un prix disponible directement (prix de
                            marché) et une liquidité suffisante. La deuxième regroupe les produits qui peuvent être valorisés par un
                            modèle standard et des données cotées.</p>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
 
{% extends "@snet-modal-base-frame" %}
{% block header %}
{% endblock %}
{% block body %}
	<div class="{{ namespace }}stackXl">
		<div class="{{ namespace }}stackXs">
			<div class="h3">Calculs Gains journaliers</div>
			<p>La classification des produits financiers est celle opérée par la norme comptable IFRS 7.
				Elle distingue trois types d’instruments financiers en fonction de la disponibilité et de la liquidité
				des éléments de valorisation. Le premier niveau se caractérise par un prix disponible directement (prix
				de marché) et une liquidité suffisante. La deuxième regroupe les produits qui peuvent être valorisés par
				un modèle standard et des données cotées.</p>
		</div>
		<div class="{{ namespace }}stackXs">
			<div class="h3">Calculs Gains totaux</div>
			<p>La classification des produits financiers est celle opérée par la norme comptable IFRS 7.
				Elle distingue trois types d’instruments financiers en fonction de la disponibilité et de la liquidité
				des
				éléments de valorisation. Le premier niveau se caractérise par un prix disponible directement (prix de
				marché) et une liquidité suffisante. La deuxième regroupe les produits qui peuvent être valorisés par un
				modèle standard et des données cotées.</p>
		</div>
	</div>
{% endblock %}