DNN Forums

Ask questions about your website to get help learning DNN and help resolve issues.

Can I pass a Class, ID or data-attribute to a DNN Modal using dnnModal.show

 1 Replies
 1 Subscribed to this topic
 22 Subscribed to this forum
Sort:
Author
Messages
Ram
New Around Here
Posts: 6
New Around Here

    Hello,

    I'm using the following to open a URL in a dnnModal. I'll be showing a consent checkbox on the modal and I need to disable the close button or hide it with CSS.

    If I use CSS currently it will hide the close button for all dnnModals which I don't want.

    I'd like to pass a custom Class ,ID or data-attribute to the modal if possible. Alternatively, if dnn has a built-in parameter to not show the close button that would be ideal.

    dnnModal.show('http://SomeURL.com?popUp=true',false,550,950,false);
    return false;
    Growing Member
    Posts: 52
    Growing Member

      There's a couple of possible approaches I can see here. Looking at the source code, it seems the dnnModal always has an ID of #iPopUp. So, you could target it with script immediately after it's opened, e.g.

      dnnModal.show('http://SomeURL.com?popUp=true',false,550,950,false);
      document.querySelector('#iPopUp').classList.add('foo');
      return false;
      

      That would add class="foo" to the modal.

      Another possibility would be to use a completely different modal script, instead of the built-in one. For instance I've worked on sites which have a theme based on Bootstrap. With those I've been able to use the Bootstrap modal and customise it to my heart's content.

      (note the link is to the Bootstrap 4 documents - Bootstrap 3's modal works slightly differently)

      These Forums are dedicated to the discussion of DNN Platform.

      For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

      1. If you have (suspected) security issues, please DO NOT post them in the forums but instead follow the official DNN security policy
      2. No Advertising. This includes the promotion of commercial and non-commercial products or services which are not directly related to DNN.
      3. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
      4. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
      5. No Flaming or Trolling.
      6. No Profanity, Racism, or Prejudice.
      7. Site Moderators have the final word on approving / removing a thread or post or comment.
      8. English language posting only, please.

      Would you like to help us?

      Awesome! Simply post in the forums using the link below and we'll get you started.

      Get Involved