Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Javascript] Private message - Popup box



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Guest

avatar
Guest


Tutorial: Private message - Popup box

So, basically this will provide to the users nice styled popup box for new private messages.


--> Tutorials, tips and tricks <--
Private message - Popup box



- Template
APC > Display > Templates > Display > overall_header
Find:
Code:
[panda=html]          <!-- BEGIN switch_enable_pm_popup -->
             pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
             if(pm != null) { pm.focus(); }
          <!-- END switch_enable_pm_popup -->

Replace with:

Code:
[panda=html]          <!-- BEGIN switch_enable_pm_popup -->
                 pm = $('body').prepend('
                <div id="kinboxpop">
                  <div id="knmessagepop" style="z-index:999;">
                       <h3><span class="username">' + _userdata.username + '</span> you have a new message!</h3>
                    <span id="contentmess">Check your inbox to see new message.<br /><br />
                       <a href="/privmsg?folder=inbox">Click here</a></span>
                     </div>
                </div>');
              $('#close_popup').on('click',function() {
                     $('#kinboxpop').remove();
                 });
              <!-- END switch_enable_pm_popup -->

- CSS
Code:
[panda=css]       #kinboxpop{background:rgba(0,0,0,0.75);position:fixed;height:100%;width:100%;top:0;left:0;}
    #kinboxpop{background:rgba(0,0,0,0.75);position:fixed;height:100%;width:100%;top:0;left:0;}
    #kinboxpop #knmessagepop{background:#fff;border:1px solid #999;height:auto;margin:25% auto;overflow:hidden;width:500px;}
    #kinboxpop #knmessagepop h3{position:relative;text-align:center;background:#333;border-bottom:1px solid #222;color:#fff;margin:0;font-weight:bold;padding:5px 0;}
    #kinboxpop #closepop{cursor:pointer;position:absolute;right:0;top:0;}
    #kinboxpop #contentmess{float:left;text-align:center;width:100%;padding:15px 0;}

- Preview





© PunBB Design


If you have any questions related to this topic create a topic with the following title:
Private message - Popup box

Powered by PunBB
Currently 0 users have thanked Guest for this post:

2
Offline

  J0k3R^

avatar
Pemanently Banned
Pemanently Banned
hello, good tutorial but i want u to help me with some things about it.



• I want the searchbox not to be shown like the PM popup, i mean just to get in dark like the other stuff
• The description from categories is a problem because if scroll down they are like z-index:999 and they are over the PM popup
• and an extra, "X" button would be very nice if possible.

anyway, ur tutorial is good man Smile

Powered by PunBB
Currently 0 users have thanked J0k3R^ for this post:

3
Offline

  Random Troll

avatar
Punbb Rookie
Punbb Rookie
Make [ic]z-index[/ic] higher.

Powered by PunBB
Currently 0 users have thanked Random Troll for this post:

4
Offline

  Abdalah tupe

avatar
Punbb Rookie
Punbb Rookie
Thanks Its works fine.

design rate : 9/10

if you want 10/10 Wink

make button for "Click here"

Ok?

Powered by PunBB
Currently 0 users have thanked Abdalah tupe for this post:

5
Offline

  LeePark

avatar
Punbb Rookie
Punbb Rookie
Hope theres for invision ^^

Powered by PunBB
Currently 0 users have thanked LeePark for this post:

6
Offline

  KiNGphx

avatar
Punbb Guru
Punbb Guru
Abdalah tupe wrote:[link="/t454-javascript-private-message-popup-box#2705"]Thanks Its works fine.

design rate : 9/10

if you want 10/10 Wink

make button for "Click here"

Ok?


you can add style like button

Find [ic]<a href="/privmsg?folder=inbox">Click here</a></span>[/ic]

then replace with this


Code:
[panda=html]<br><a href="/privmsg?folder=inbox" class="pbutton"> Check Now!!</a></span>


then add this css

Code:
[panda=css]  .pbutton {
-moz-border-radius: 2px;
-moz-box-shadow: rgba(0,0,0,0.43) 0 1px 3px;
-webkit-border-radius: 2px;
-webkit-box-shadow: rgba(0,0,0,0.43) 0 1px 3px;
background: #353535 url(http://i57.servimg.com/u/f57/18/12/37/46/highli10.png) repeat-x top;
border: 1px solid #2b2b2b;
border-radius: 2px;
box-shadow: rgba(0,0,0,0.43) 0 1px 3px;
color: #fff;
cursor: pointer;
font-family: helvetica,arial,sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
outline: none;
padding: 4px 10px!important;
}

Powered by PunBB
Currently 0 users have thanked KiNGphx for this post:

7
Offline

  Abdalah tupe

avatar
Punbb Rookie
Punbb Rookie
KiNGphx wrote:[link="/t454-javascript-private-message-popup-box#2709"]
Abdalah tupe wrote:[link="/t454-javascript-private-message-popup-box#2705"]Thanks Its works fine.

design rate : 9/10

if you want 10/10 Wink

make button for "Click here"

Ok?


you can add style like button

Find [ic]<a href="/privmsg?folder=inbox">Click here</a></span>[/ic]

then replace with this


Code:
[panda=html]<br><a href="/privmsg?folder=inbox" class="pbutton"> Check Now!!</a></span>


then add this css

Code:
[panda=css]  .pbutton {
-moz-border-radius: 2px;
-moz-box-shadow: rgba(0,0,0,0.43) 0 1px 3px;
-webkit-border-radius: 2px;
-webkit-box-shadow: rgba(0,0,0,0.43) 0 1px 3px;
background: #353535 url(http://i57.servimg.com/u/f57/18/12/37/46/highli10.png) repeat-x top;
border: 1px solid #2b2b2b;
border-radius: 2px;
box-shadow: rgba(0,0,0,0.43) 0 1px 3px;
color: #fff;
cursor: pointer;
font-family: helvetica,arial,sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
outline: none;
padding: 4px 10px!important;
}

Thanks,Its work thanks Smile

Now with your code will be 10/10

Powered by PunBB
Currently 0 users have thanked Abdalah tupe for this post:

8
Offline

  iMac_Publicando

avatar
Punbb Rookie
Punbb Rookie
I found the last code above.

Powered by PunBB
Currently 0 users have thanked iMac_Publicando for this post:

9
Offline

  Andrei34

avatar
Punbb Rookie
Punbb Rookie
very good tuto thx

Powered by PunBB
Currently 0 users have thanked Andrei34 for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum