How to use several Modal in the same page

Question

i'm trying to find a way to use several modals on the same page, could you help me ?

Here is the code I use, and only the first modal works :

<script>
    // Modals
    require(
        ['jquery','Magento_Ui/js/modal/modal'],
        function($, modal) {
            var options = {
                type                : 'slide',
                responsive          : true,
                innerScroll         : true,
                closeText           : $.mage.__('Fermer'),
                buttons             : []
            };

            // Modal Guest
            var popup = modal(options, $('.modal_guest'));
            $('.modal_guest').modal();
            $(".open__modal_guest").on("click", function (e) {
                e.preventDefault();
                popup.openModal();
            });

            // Modal User
            var popup = modal(options, $('.modal_user'));
            $('.modal_user').modal();
            $(".open__modal_user").on("click", function (e) {
                e.preventDefault();
                popup.openModal();
            });
        }
    );
</script>

Answer 1

I found this solution, but... hahum... it's not so optimised :/

require(
        ['jquery','Magento_Ui/js/modal/modal'],
        function($, modal) {
            var options_guest = {
                type                : 'slide',
                responsive          : true,
                innerScroll         : true,
                closeText           : $.mage.__('Fermer'),
                buttons             : [],
                modalClass          : "modal__guest background__white modal__vertical__large"
            };
            var modal_guest = modal(options_guest, $('.modal_guest'));
            $('.modal_guest').modal();
            $('.open__modal_guest').on("click", function (e) {
                e.preventDefault();
                modal_guest.openModal();
            });

            var options_form = {
                type                : 'slide',
                responsive          : true,
                innerScroll         : true,
                closeText           : $.mage.__('Fermer'),
                buttons             : [],
                modalClass          : 'modal__form background__secondary modal__vertical__small'
            };
            var modal_form = modal(options_form, $('.modal_form'));
            $('.modal_form').modal();
            $('.open__modal_form').on("click", function (e) {
                e.preventDefault();
                modal_form.openModal();
            });

            var options_connexion = {
                type                : 'slide',
                responsive          : true,
                innerScroll         : true,
                closeText           : $.mage.__('Fermer'),
                buttons             : [],
                modalClass          : 'modal__connexion background__tertiary modal__vertical__small'
            };
            var modal_connexion = modal(options_connexion, $(".modal_connexion"));
            $('.modal_connexion').modal();
            $('.open__modal_connexion').on("click", function (e) {
                e.preventDefault();
                modal_connexion.openModal();
            });
        }
    );