我们能否使 aura 中的模态框可滚动以用于移动布局?

问题描述 投票:0回答:0

下面是我的 LC_FAQContainer aura 组件,我在其中使用模态框来显示我们应用程序的常见问题解答。在这个 aura 组件中,我正在调用另一个 aura 组件,我在闪电手风琴部分写下我的常见问题解答。

LC_FAQ下面的容器cmp文件>

    <aura:component >
    <aura:attribute name="displayFAQModal" type="Boolean"   />
    <section role="dialog" tabindex="-1" aria-label="Meaningful description of the modal content" aria-modal="true" class="slds-modal slds-fade-in-open slds-modal_large"><!--9693-->
        <div class="slds-modal__container" >
            
            <div class="slds-modal__content slds-p-around_xx-small slds-modal__content_headless" style="background-color: #E4E4E4"  id="modal-content-id-1"><!--9693-->
                
                <p class="slds-text-body_regular slds-text-align_left"> <c:LC_AgentFAQ/> 
                    
                </p>
                
                <br/>
                <div class="slds-float_right">
                    <!--AK- Close button name updated to French 9111,9110-->  
                    <button class="slds-button slds-button_brand " onclick="{!c.handleModalClose}">Fermer</button>
                </div>
            </div>
            
        </div>
    </section>
</aura:component>

LC_AgentFAQ aura 组件 cmp 文件如下>

<aura:component implements="forceCommunity:availableForAllPageTypes,force:appHostable,flexipage:availableForAllPageTypes,lightning:availableForFlowScreens,lightning:isUrlAddressable" 
                access="global" 
                extends="c:Base" 
                description="Show the FAQ for both webcreditor and applicant space on help section">
    
    <!--AK- US-8902,8904 FAQ attributes 03/17/2022-->
    <aura:attribute name="isWebcreditorCommunity" type="Boolean" default="false"/>
    <aura:attribute name="isApplicantSpaceCommunity" type="Boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <!--AK- US-9110,9111 FAQ contents updated 06/22/2022--> 
    <lightning:card class="FAQ" title="FAQ">    
        <aura:if isTrue="{!v.isWebcreditorCommunity}">
            <div>
                <lightning:accordion activeSectionName="A">
                    
                    <lightning:accordionSection label="Je souhaite comprendre à quoi correspond le montant des encours Lemoine à  déclarer lors de l’adhésion:" name="A">&bull; Correspond à la part déjà assurée avant l’adhésion en cours (tous assureurs confondus) pour le postulant, soit  l’encours cumulé des contrats de crédit après application de la quotité.<br></br><br></br>Le montant des encours dits « Lemoine » ne doit être déclaré dans le champ ci-contre que s’il respecte les 3 conditions suivantes :<br></br><br></br>&bull; 
                    Il concerne uniquement des prêts immobiliers à usage d’habitation ou mixtes (professionnel et à usage d’habitation), y compris leurs prêts relais.<br></br><br></br>&bull; Les encours cumulés (montants assurés à date) des prêts immobiliers à usage d’habitation ou mixte du postulant (y compris le présent projet), souscrits à compter du 1er juin 2022, n’excèdent pas 200 000€.<br></br><br></br>&bull; L’échéance du remboursement du prêt contracté pour la présente adhésion est antérieure au 60ème anniversaire de l'assuré.<br></br><br></br>
                    Si toutes ces conditions sont réunies, alors, aucune information relative à l'état de santé ne pourra être demandée, ni aucun examen médical de l'assuré ne pourra être sollicité pour l’adhésion en cours (article L113-2-1 du Code des assurances).<br></br></lightning:accordionSection>
                    
                    <lightning:accordionSection label="Je souhaite connaitre l’avancée de l’adhésion." name="B">Saisir le n° de l’adhésion dans la barre de recherche WebCreditor puis cliquer sur le lien proposé dans la barre de recherche.<br></br>Vous accédez ainsi à la fiche de synthèse de l’adhésion, vous pouvez visualiser le statut et suivre l’état d’avancement détaillé de l’adhésion.<br></br>Les rubriques se mettent à jour en temps réel lorsque :<br></br>&bull; 
                    En signature électronique : Le client signe ses documents dans son espace adhérent, complète son questionnaire médical en ligne et reçoit la décision d’AXA.<br></br>&bull; En signature papier : Les équipes internes traitent, analysent et donnent une décision.</lightning:accordionSection>
                   
                    <lightning:accordionSection label="Je souhaite avoir des renseignements sur le parcours papier." name="C">Le prêteur reçoit les documents du client par courrier, vérifie si le dossier est complet et signé.<br></br>Il contrôle ensuite les pièces médicales, si une réponse est à « oui » dans le questionnaire médical simplifié, il s’assure que le client a bien complété son questionnaire médical détaillé.<br></br>Le prêteur transmet l'ensemble des documents dans WebCreditor.</lightning:accordionSection>

                    <lightning:accordionSection label="Je voudrais avoir des renseignements sur la signature en ligne." name="D">L’espace client est automatiquement créé et le client reçoit instantanément un email de première connexion à son espace.<br></br>Le client poursuit ainsi son parcours de souscription en ligne à distance; il signe tous ses documents électroniquement grâce aux codes SMS qu’il reçoit sur son mobile.<br></br>Il remplit son questionnaire médical dynamique en ligne dans un espace sécurisé.<br></br>A l’issue du questionnaire médical il reçoit la lettre de décision de l’assureur et son certificat d’assurance dans son espace adhérent.</lightning:accordionSection>

                    <lightning:accordionSection label="Je rencontre un problème de téléchargement de documents lors d’une signature papier." name="E">Après le choix du mode de signature : cliquer sur le document à télécharger puis cliquer sur « Télécharger »; Ou chercher l’adhésion avec son numéro AP, aller dans la section « Documents » puis sélectionner le document voulu et cliquer sur « Télécharger ».<br></br>Si cela ne fonctionne pas, il faut autoriser les pop-up. Pour cela, il vous suffit d’aller dans la barre d’adresse, cliquez sur « Pop-Up bloqués » puis sur « toujours autoriser les pop-up » puis OK.</lightning:accordionSection>
                    
                    <lightning:accordionSection label="Le client ne retrouve pas ses identifiants pour accéder à son espace adhérent." name="F">Si votre client ne retrouve pas ses identifiants afin de se connecter à son espace adhérent, vous pouvez contacter directement l’équipe de la Hotline AXA au 01 57 32 47 14 ou par mail [email protected] pour demander le renvoi des identifiants.</lightning:accordionSection>

                    <lightning:accordionSection label="Je souhaite réinitialiser mon mot de passe" name="G">Sur la page de connexion cliquer sur « Mot de passe oublié », entrer votre identifiant sous la forme : [email protected] puis cliquer sur « Continuer ». Vous recevrez ainsi un email afin de réinitialiser votre mot de passe.</lightning:accordionSection>

                    <lightning:accordionSection label="Quelle est la procédure à suivre dans le cadre d’une modification de quotité ?" name="H">La modification de quotité est possible jusqu’au moment de choisir le mode de signature (papier ou électronique). Une fois la signature sélectionnée, la quotité n’est plus modifiable.<br></br>Vous devrez demander au prêteur de passer l’adhésion en sans suite pour pouvoir créer un nouveau parcours.</lightning:accordionSection>

                    <lightning:accordionSection label="Quel navigateur internet est-il conseillé d’utiliser ?" name="I">Les navigateurs préconisés sont Microsoft Edge Chromium, Google Chrome, Firefox et Safari. A noter qu’Internet Explorer n’est plus pris en charge.</lightning:accordionSection>

                    <lightning:accordionSection label="Je me suis trompé(e) plusieurs fois dans la saisie de mon mot de passe, mon compte est maintenant bloqué, comment débloquer ma session ?" name="J">Pour débloquer votre session, vous devez envoyer un mail à la Hotline Assistance AXA - [email protected] – afin qu’ils réinitialisent votre compte. Ainsi, un nouveau lien de connexion WebCreditor vous sera envoyé sur votre adresse mail.</lightning:accordionSection>
    
                </lightning:accordion>
            </div>
        </aura:if>
        
        <aura:if isTrue="{!v.isApplicantSpaceCommunity}">
            <div>
                <lightning:accordion activeSectionName="A">
                    <lightning:accordionSection label="Je n’arrive pas à signer en ligne et/ou je ne reçois pas le code sms" name="A">Une
                        fois connecté à votre espace adhérent cliquer sur le bouton vert « Consulter ».<br></br>
                        Après avoir lu le document, cliquer sur le bouton « Signer » qui vous permettra de recevoir un code secret par sms
                        pour signer le document.<br></br>
                        Cliquer enfin sur le bouton bleu « signer ».<br></br>Si aucun code n’est reçu, vérifier le numéro de téléphone
                        renseigné.<br></br>
                        Si le numéro de téléphone renseigné est incorrect, contactez la Hotline AXA au 01 57 32 47 14 ou par mail
                        [email protected]</lightning:accordionSection>
                    <lightning:accordionSection label="Quand je tente de me connecter pour la première fois à WebCreditor, je tombe sur l’espace adhérent de mon co-emprunteur."
                                                name="B">Il est nécessaire que le co-emprunteur se déconnecte de sa session.<br></br>Veuillez cliquer sur le bouton en haut à droite de l ’écran pour pouvoir vous déconnecter, avant de reprendre votre mail de connexion et de cliquer sur le lien.</lightning:accordionSection>
                    
                    <lightning:accordionSection label="J’ai choisi par erreur de signer mes documents médicaux manuellement, puis-je revenir en arrière ?"
                                                name="C">Il est impossible de revenir en arrière après avoir choisi de signer ses documents médicaux manuellement.<br></br>Il faudra donc imprimer le questionnaire le signer et le renvoyer à l’adresse indiquée dans le document.
                        </lightning:accordionSection>
                    
                    <lightning:accordionSection label="Où puis-je consulter mes documents signés ?"
                                                name="D">À tout moment, vous pouvez consulter les documents signés mis à disposition par l’assureur dans la rubrique « Vos Documents ».</lightning:accordionSection>
                    
                    <lightning:accordionSection label="Je me suis trompé(e) plusieurs fois dans la saisie de mon mot de passe, mon compte est maintenant bloqué, comment débloquer ma session ?"
                                                name="E">Pour débloquer votre session, vous devez envoyer un mail à la Hotline Assistance AXA - [email protected] – afin qu’ils réinitialisent votre compte. Ainsi, un nouveau lien de connexion WebCreditor vous sera envoyé sur votre adresse mail.</lightning:accordionSection> 
                    
                    <lightning:accordionSection label="Je souhaite réinitialiser mon mot de passe "
                                                name="F">Sur la page de connexion cliquer sur « Mot de passe oublié », entrer votre identifiant sous la forme : [email protected] puis cliquer sur « Réinitialisez ». Vous recevrez ainsi un email afin de réinitialiser votre mot de passe.</lightning:accordionSection>  
                    <lightning:accordionSection label="Dans quel cas la convention AERAS s’applique-t-elle et comment puis-je en bénéficier ?" name="G">La
                        Convention AERAS s'applique lorsque le questionnaire de santé complété par le candidat à l'emprunt fait apparaitre
                        qu'il présente un risque aggravé de santé et que sa demande d'assurance ne peut pas être acceptée aux conditions
                        standard du contrat d'assurance, en terme de garanties et de tarif.<br></br>Elle s'applique également lorsque le
                        candidat à l'emprunt répond aux critères lui permettant de bénéficier du "droit à l'oubli" ou de la grille de
                        référence AERAS.<br></br>La convention AERAS s’applique automatiquement dès que les personnes présentent ou ont
                        présenté un risque aggravé de santé.</lightning:accordionSection> 

                     <lightning:accordionSection label="Dans le cadre de la convention AERAS, à quoi sert l’écrêtement ?"
                                                name="H">Le dispositif d’écrêtement des surprimes d’assurance permet de diminuer les surprimes à la charge des emprunteurs disposant de revenus modestes. Il est financé et géré par les prêteurs et les assureurs.</lightning:accordionSection>
                    
                    <lightning:accordionSection label="Comment optimiser la connexion à son espace adhérent pour éviter les blocages WebCreditor ?"
                                                name="I">Les navigateurs préconisés sont Microsoft Edge Chromium, Google Chrome, Firefox et Safari. À noter qu’Internet Explorer n’est plus pris en charge et que par conséquent WebCreditor ne fonctionne pas sur ce navigateur.<br></br>Il est également conseillé de vider l’historique et les caches du navigateur régulièrement afin de profiter d’une expérience optimisée sur notre site.</lightning:accordionSection>
                    
                </lightning:accordion>
            </div>
         </aura:if>
    </lightning:card>
    
</aura:component>

这在桌面上运行良好,但我的要求是使其移动用户界面友好(响应式布局)。

Curretnly 它显示如下移动布局。

css salesforce apex salesforce-lightning
© www.soinside.com 2019 - 2024. All rights reserved.