Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Register in pop-up box?

ZhaanZhaan Professional fool ✭✭
edited February 2013 in Vanilla 2.0 - 2.8

Hiya! I'm just wondering.. is it possible to use a pop-up box for registrations instead of a separate page? I'd like it to function just like the login button does. Any input appreciated.

PS: I'm using 2.1 atm.

Best Answers

Answers

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited February 2013

    The pop up are controlled by jQuery popup. not sure how this will work but you could try it...

    You could possibly add some function like this in your theme:

    < script type="text/javascript" >
     
    $(document).ready(function(){
    //open popup
    $("#pop").click(function(){
    $("#Form_User_Register").fadeIn(1000);
    positionPopup();
    });
     
    //close popup
    $("#close").click(function(){
    $("#Form_User_Register").fadeOut(500);
    });
    });
     
    //position the popup at the center of the page
    function positionPopup(){
    if(!$("#Form_User_Register").is(':visible')){
    return;
    }
    $("#Form_User_Register").css({
    left: ($(window).width() - $('#Form_User_Register').width()) / 2,
    top: ($(window).width() - $('#Form_User_Register').width()) / 7,
    position:'absolute'
    });
    }
     
    //maintain the popup at center of the page when browser resized
    
    $(window).bind('resize',positionPopup);
     
    < /script >
    
    

    Then style it if it has no style

    #Form_User_Register{
    position: absolute;
    border: 5px solid gray;
    padding: 10px;
    background: white;
    width: 270px;
    height: 190px;
    }
    #pop{
    display: block;
    border: 1px solid gray;
    width: 65px;
    text-align: center;
    padding: 6px;
    border-radius: 5px;
    text-decoration: none;
    margin: 0 auto;
    }
    
    
    

    then add this to the theme:

    < a href="/forum/entry/register?Target=discussions" class="Button ApplyButton" id="pop" >PopUpRegister< /a >
    < br />
    < form id="Form_User_Register" style="display:none" >
    < h2> Register..< /h2>
    < label >Username: < /label>< br />< br />
    < label >Password: < /label>< br />< br />
    < input type="button" value="Login" />
    < a href="#" id="close" >Close< /a>
    < /form >
    
    

    Make sure you remove the spaces between the < > , I put them in so the code would show...

    ZhaanUnderDog
  • ZhaanZhaan Professional fool ✭✭

    Thanks for the input, both of you!

    @x00 and where exactly should I place that code? :D

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited February 2013

    in your theme like this but remove the spaces between the < > :

    < script type="text/javascript" > jQuery(document).ready(function($){$('.ApplyButton').popup();}); < /script > tags

    I just tested it in another forum and it works but you will need to style the width and height of the new pop up.

    UnderDog
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    I noticed that the pop up does not render the captcha on the form, I wonder if it also need to be added to the pop function to show. in the source it has the li table as if it was showing. I tried making the form longer but that did not do it :(

  • SrggamerSrggamer HardCore Gamer ✭✭✭

    Have to say I fail, when tried this.

    Inserted everything into CUSTOM.CSS

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You need to insert the script function in the theme default.master.php somewhere after the last div at the bottom end. The css goes into the custom.css to adjust the size of the pop up. Remember I added spaces between the < > so they would show here. You need to take them out if you copy pasted .

  • SrggamerSrggamer HardCore Gamer ✭✭✭

    @vrijvlinder said:
    You need to insert the script function in the theme default.master.php somewhere after the last div at the bottom end. The css goes into the custom.css to adjust the size of the pop up. Remember I added spaces between the < > so they would show here. You need to take them out if you copy pasted .

    Ok till then, im working on my master.php

  • please tell me how to add it to my forum... http://edupluslanka.org

Sign In or Register to comment.