Two modal popups showing same text

  • Profile Image
    swbrodie
    Asked on February 19, 2021 at 08:25 AM

    Hello,

    I have to configure multiple modal pop-ups in my form. Even though the underlying HTML code is the same they show the same text.

    Please let me know how to fix this.

    Thank you.

    Screenshot: The first popup is being displayed for other popups as well

    Screenshot
  • Profile Image
    Jimmy_D
    Answered on February 21, 2021 at 12:32 PM

    Hello!

    Sorry for the late reply.

    This is happening because you are using the same class and id on both modals and they are being manipulated using the same CSS selector; therefore the one in the first position has the priority. 

    To fix the issue, replace the code on the second modal by the code below and add the CSS code that follows to your form.

    <p><a class="button" href="#open1" rel="nofollow">Applicant/Landowner/Contractor Information</a></p>
    <div id="open1" class="modalBox1">
    <div><a class="close" title="Close" href="#close" rel="nofollow">X</a>
    <p style="text-align: justify;"><span style="font-size: 12pt;">The applicant must possess the authority to undertake the work described in the application or to act as the duly authorized agent of the landowner. The applicant is the responsible party for the project and the main point of contact for permitting questions, scheduling inspections, and other project details. The landowner&rsquo;s name and address is required if different from the applicant. If a contractor will be used to do the work, provide the contractor&rsquo;s name and contact information. Be aware that the issuance of any permit does not give permission to carry out a project on land that is not owned by the applicant. The applicant has the duty to secure necessary landowner authorization.</span></p>
    </div>
    </div>


    CSS

    /*Main Box Content*/
    .modalBox1 {
        position : fixed;
        font-family : Arial, Helvetica, sans-serif;
        top : 0;
        right : 0;
        bottom : 0;
        left : 0;
        background : rgba(0,0,0,0.8);
        color : black;
        z-index : 99999;
        opacity : 0;
        -webkit-transition : opacity 400ms ease-in;
        -moz-transition : opacity 400ms ease-in;
        transition : opacity 400ms ease-in;
        pointer-events : none;
    }


    /*When the href are clicked*/
    .modalBox1:target {
        opacity : 1;
        pointer-events : auto;
    }


    .modalBox1 > div {
        width : 400px;
        position : relative;
        margin : 10% auto;
        padding : 5px 20px 13px 20px;
        border-radius : 0px;
        background : white;
        height : 300px;
    }



    1613928746_6032992ad38e5_Let us know if you need further assistance.

    Best,




  • Profile Image
    swbrodie
    Answered on February 22, 2021 at 09:58 AM

    Hello Jimmy,

    Thank you for your response. This works as expected now. I was able to add more modal pop-ups.

    Kind regards,

    SW