1. Technology Consultancy and Advisory
    Sudonix

    Sudonix

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular
    • Tags
    • Users
    • Groups
    • Solved
    • More
      • About
      • Contact
      • Donate
      • FAQ
      • Founder's Journey
      • Policies

    How to blur NodeBB on modal

    Development
    blur modal
    2
    4
    139
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • phenomlab
      phenomlab
      Admin
      Global Moderator
      last edited by

      I spent most of the afternoon (yes, I know) trying to track down a way to blur the background window containing data in the event that the modal was fired. I thought about using jQuery initially to complete this, but then that would add another layer of complexity, which could easily break, or fire at the wrong time, which is never a good idea.

      After a bit of head scratching and soul searching, it seems this is possible with the bootbox library and a small element of CSS.

      blurred.png

      The result is pleasing to the eye, and looks professional in the sense that you want the user to focus on the modal request rather than the content on the screen. This technique is typical of paywalls, or as a very convenient way of making a web page unreadable to passing users, but still crawlable via Google.

      It could be used in conjunction with the .user-loggedin class too ๐Ÿ™‚

      The CSS itself is surprisingly simple

      .modal-open #panel {
          filter: blur(5px);
      }
      

      Note that the blur value can be increased or decreased according to taste. The lower the blur, the more โ€œlegibleโ€ the background becomes. If you want to cover the entire screen apart from the modal and the component it references, then use #panel. If you prefer the navbar to still be visible (but not clickable) then you can replace #panel with #content.

      .modal-open #content{
          filter: blur(5px);
      }
      

      Enjoy !

      DownPW 1 Reply Last reply Reply Quote 1
      • DownPW
        DownPW
        last edited by

        Very good effect ๐Ÿ˜‰
        Thanks for the tip Mark !

        1 Reply Last reply Reply Quote 1
        • DownPW
          DownPW
          @phenomlab
          last edited by

          @phenomlab said in How to blur NodeBB on modal:

          It could be used in conjunction with the .user-loggedin class too

          For login page user ?

          phenomlab 1 Reply Last reply Reply Quote 0
          • phenomlab
            phenomlab
            Admin
            Global Moderator
            @DownPW
            last edited by

            @DownPW potentially, yes. Depends on the condition required I suppose.

            1 Reply Last reply Reply Quote 0

            • First post
              Last post

            Discover More

            • phenomlab

              CSS3: Gradient Generator
              Development • css gradient • • phenomlab

              1
              1
              Votes
              1
              Posts
              87
              Views

              No one has replied

            • phenomlab

              SWATCH: Colours, Gradients, and much more
              Development • colour gradient • • phenomlab

              1
              1
              Votes
              1
              Posts
              84
              Views

              No one has replied

            © 2022 sudonix.com
            Consent Policies