HomeHome  
  • WelcomeWelcome  
  • Events  
  • PublicationsPublications  
  • FAQFAQ  
  • SearchSearch  
  • MemberlistMemberlist  
  • UsergroupsUsergroups  
  • RegisterRegister  
  • Log inLog in  
  • You are not connected. Please login or register


    introduci on popup: style and close

    avatar
    • ***


        Reputation : 2
        Registered on : 2014-03-10
        Posts : 33
        Love Fmcodes
      Awesome thank you Niko! ;)

      However is there any way to style it? Or maybe add an option to allow users to close the popup? Coz I just want a friendly reminder, don't want to force people in my forum :/

      avatar
      • Administrator

          Reputation : 315
          Registered on : 2012-02-22
          Posts : 2317
          School of codes courses: coming soon
        Hello Rhino.Freak

        I have split the topic and moved it to Coding Assistance thanks 


        Have a look at all these tutorials


        Have a read! :bene:



        Niko wants you in the team Guest

        Community manager and Administrator at Forumattivo.com

        avatar
        • ***


            Reputation : 2
            Registered on : 2014-03-10
            Posts : 33
            Love Fmcodes
          thanks ! ill take a look :D

          avatar
          • Administrator

              Reputation : 315
              Registered on : 2012-02-22
              Posts : 2317
              School of codes courses: coming soon
            Let me know :bene:



            Niko wants you in the team Guest

            Community manager and Administrator at Forumattivo.com

            avatar
            • ***


                Reputation : 2
                Registered on : 2014-03-10
                Posts : 33
                Love Fmcodes
              hi, I read them, but I'm confused .. I don't understand how to make a simple overlay popup like you made here, what I want different than this is that clicking elsewhere on forum would close the popup.. can you help ? :/

              avatar
              • Administrator

                  Reputation : 315
                  Registered on : 2012-02-22
                  Posts : 2317
                  School of codes courses: coming soon
                Archived:
                I will tell you how to do it :bene:

                Add in your CSS stylesheet these codes (you can customize the box and the layer style)
                Code:
                #layer {
                background: black;
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 1000;
                opacity: 0.1;
                }

                #layer {
                background: black;
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 1000;
                opacity: 0.1;
                }

                #box {
                width: 500px;
                height: 250px;
                position: fixed;
                z-index: 2000;
                padding: 5px;
                left: 33%;
                top: 30%;
                border-radius: 4px;
                background: white;
                }

                Now, create a new javascript code  in your forum, and add this code (in all pages if you want it in all the pages, in topics or wherever you want)
                Code:
                $(function() {
                    $('body').after('<div id="layer" class="hide" onclick="$(\'.hide\').toggle(\'fast\');"></div><div id="box" class="hide">CONTENT OF THE BOX HERE</div>');
                });

                let me know :Good:

                A tutorial has been posted by Tiffany! :bene:

                Have a look: https://www.fmcodes.com/t893-show-hide-popup-message-on-click#6961



                Last edited by Tiffany! on Sun Mar 23, 2014 11:11 am; edited 1 time in total (Reason for editing : creation of a new resource)

                avatar
                • ***


                    Reputation : 2
                    Registered on : 2014-03-10
                    Posts : 33
                    Love Fmcodes
                  Thanks ~! It works great :D , a few queries :
                  now how can I make Popup only for users with no posts ?
                  how can I make it ONE TIME per visit? (if possible), like once closed it shouldn't come back after changing pages?

                  thanks a LOT .. :D

                  avatar
                  • Administrator

                      Reputation : 315
                      Registered on : 2012-02-22
                      Posts : 2317
                      School of codes courses: coming soon
                    • Only if there are no posts from that member (replace the code in the tutorial with this)
                      Code:
                      $(window).load(function() {
                          if (typeof _userdata === "undefined") return;
                          if (_userdata["user_posts"] < 1) {
                            $('body').after('<div id="layer" class="hide" onclick="$('.hide').toggle('fast');"></div><div id="box" class="hide">CONTENT</div>');
                          }
                      });

                    • Do not show it anymore
                      replace
                      Code:
                      <div id="layer" class="hide" onclick="$('.hide').toggle('fast');"></div><div id="box" class="hide">CONTENT</div>

                      with
                      Code:
                      <div id="layer" style="display:none" class="hide" onclick="$('.hide').toggle('fast');"></div><div id="box" class="hide" style="display:none">CONTENT</div>

                      and add this javascript code:
                      Code:
                      if(!my_getcookie('popup')) {
                        document.getElementById(layer').style.display = '';
                        my_setcookie('popup',1,true);
                      }

                      if(!my_getcookie('popup')) {
                        document.getElementById('box').style.display = '';
                        my_setcookie('popup',1,true);
                      }



                    :Good:



                    Niko wants you in the team Guest

                    Community manager and Administrator at Forumattivo.com

                    avatar
                    • Manager

                        Reputation : 30
                        Registered on : 2012-04-17
                        Posts : 199
                      Hello Rhino.Freak

                      Hello,

                      If the issue is solved, please let us know with a message

                      If not, we remind you that you are allowed to BUMP every 24 hours thanks



                      Welcome on the forum of Codes
                      avatar
                      • Manager

                          Reputation : 30
                          Registered on : 2012-04-17
                          Posts : 199
                        The topic is considered solved or abandonded thanks

                        Next time use a bump message
                        Have a nice day!



                        Welcome on the forum of Codes


                        YOUR BANNER HERE
                        728x90
                        DMCA.com Protection Status
                        Forum free | © PunBB | Free forum support | Contact | Report an abuse | Free forum