Modal Login/Form dialog with recaptcha

[Megatron]

Hello, how to do a modal Login/Register dialog/form like the picture below. In the form, I need username, password and also recaptcha field with ASP MVC 4.6.2 and Identity 2.2.1

[Narayanasamy Panneer Selvam]

Hi Megatron, 

  

Thanks for Contacting Syncfusion support. 

  

We have prepared a sample as per your requirement. Please find it in the below link.  

http://www.syncfusion.com/downloads/support/forum/124730/ze/ModalDialog1247301445173530  

To know about the list of properties, methods, and events available in Dialog and Captcha control please refer the following links, 

Captcha: http://help.syncfusion.com/aspnetmvc/captcha/getting-started  

Dialog: http://help.syncfusion.com/aspnetmvc/dialog/getting-started  

  

Regards, 

Narayanasamy P. 

[Megatron]

thanks for the sample, I was able to run the sample.

But its nowhere close to the same behavior as the one on website.

Its offset towards the center of the page,
It does not factor for the zindex, when I add items its sometimes hiding or hidden.
On a mobile device it does not work - your libs are old, I updated to current libs but still it did not fix it.
It does not collapse back/ or close

[Narayanasamy Panneer Selvam]

Hi Megatron, 

  

Thanks for the update. 

  

Query 1:  offset towards the center of the page 

You need to override the default left value for positioning it to the right corner on the window.  

Query 2: when I add items its sometimes hiding or hidden and On a mobile device it does not work 

By using “IsResponsive” property to set as “true” you can use the same form in your mobile device also. Please find the changes in the code example block. 

  

@{Html.EJ().Dialog("lognForm").Title("Login Form").IsResponsive(true).Containment(".control").ContentTemplate(@<div> 

…….. 

} 

<style> 

#lognForm_wrapper { 

        background-repeat: no-repeat; 

        left: auto !important; 

        right: 0px !important; 

        top: 120px !important; 

        position: fixed !important; 

    } 

</style> 

  

Please refer the modified sample in the below link: http://www.syncfusion.com/downloads/support/forum/124730/LOGIND~1581853711.ZIP  

  

Regards, 

Narayanasamy P.