In order to display your LoginRadius Login Interface in a pop-up you can leverage Jquery-ui which is a well documented, easy-to-use library that allows you to handle some common functionality such as pop-up dialogs and other UI features. In this article we go over the steps to use Jquery-ui to display a pop-up on your page with a LoginRadius login interface using the LoginRadius HTML SDK.
1. Get the required references this guide relies on: Jquery and Jquery-ui. You can include the hosted reference files in the header of your page:
1<!--
2-->2. Include the LoginRadius Interface Javascript and HTML5 SDK reference:
1<!--
2var options={};
3options.login=true;
4LoginRadius_SocialLogin.util.ready(function () {
5 $ui = LoginRadius_SocialLogin.lr_login_settings;
6 $ui.interfacesize = "";
7 $ui.apikey = "";
8 $ui.callback="";
9 $ui.lrinterfacecontainer ="interfacecontainerdiv";
10 LoginRadius_SocialLogin.init(options);
11});
12-->3. Create the HTML structure for your page. Below we have created a button to trigger our pop-up display as well as the dialog container that will be displayed in the custom pop-up which is hidden by default. We have also included a div to display profile data after successfully authenticating.
1<!--Login
2-->4. Create a JavaScript function to handle the display of the pop-up dialog. The below function utilizes Jquery-ui functions to display the dialog and the LoginRadius login interface initialization function to render the login interface on the popup:
1function Login(){
2 $( "#dialog" ).dialog();
3 LoginRadius_SocialLogin.init(options);
4}5. Include the JavaScript callback script to handle a successful authentication and display the profile data.
1LoginRadiusSDK.setLoginCallback(Successfullylogin);
2function Successfullylogin(){
3 LoginRadiusSDK.getUserprofile( function( data) {
4 $( "#dialog" ).dialog("close");
5 document.getElementById("profile").innerHTML = JSON.stringify(data);
6 });
7}Full Example:
1<!--
2var options={};
3options.login=true;
4LoginRadius_SocialLogin.util.ready(function () {
5$ui = LoginRadius_SocialLogin.lr_login_settings;
6$ui.interfacesize = "";
7$ui.apikey = "";
8$ui.callback="";
9$ui.lrinterfacecontainer ="interfacecontainerdiv";
10LoginRadius_SocialLogin.init(options); });
11function Login(){
12$( "#dialog" ).dialog();
13LoginRadius_SocialLogin.init(options);
14}
15LoginRadiusSDK.setLoginCallback(Successfullylogin);
16function Successfullylogin(){
17LoginRadiusSDK.getUserprofile( function( data) {
18$( "#dialog" ).dialog("close");
19document.getElementById("profile").innerHTML = JSON.stringify(data);
20});
21}
22Login
23-->
