vb.org Archive - Logout Popup Box

The logout popup is created with default browser based dialog box with the help of javascript to trigger it.

Both FORUMHOME and navbar templates have this link:

Code:

<a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]"  onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a>

The part highlighted in red is the trigger and as you see theres nothing to redesign, however you can make your own...

This is only basic to get you going

Create 2 functions 1 to show and 1 to hide a custom dialog/modal box created with html and CSS:

Add to headinclude template:

Code:

<script type="text/javascript">

// onclick show box

function CustomLogOut() {

 document.getElementById("custom_logout_box").style.display = "block";

};

// onclick hide box ie to cancel

function CustomLogOut_Cancel() {

 document.getElementById("custom_logout_box").style.display = "none";

};

</script>

Now change both instances of links to (FORUMHOME and navbar templates):

Code:

<a href="#" onclick="CustomLogOut(); return false;"><phrase 1="$bbuserinfo[username]">$vbphrase[log_out_x]</phrase></a>

This is the CSS that designs the logout box this needs to be added to Additional CSS in style manager:

Code:

#custom_logout_box {

background:rgba(0,0,0,.5);

position:absolute;

top:0;

left:0;

width:100%;

height:100vh;

display:none;

z-index:999;

}



#custom_logout_box_inner {

background:#fff;

position:absolute;

top:50%;

left:50%;

width:300px;

height:100px;

margin:-90px 0 0 -190px;

padding:20px;

text-align:center;

z-index:9999;

line-height:100px;

}

This can obviously be tweaked to your own taste.

and this is the new logout box it includes 2 links, 1 to log out and the other to cancel just like the original, add to top of header template:

Code:

<div id="custom_logout_box">

 <div id="custom_logout_box_inner">

<a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]">Logout</a> | <a href="#"  onclick="CustomLogOut_Cancel(); return false;">Cancel</a>

 </div>

</div>

again content and design can obviously be tweaked to your own taste.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01885 seconds Memory Usage 1,717KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (5)bbcode_code_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (3)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: