Topic-icon Modal issue , Login button is not working!

Active Subscriptions:

None
2 years 5 months ago #67556 by milad1
Hi i have installed the module, and set to Modal popup and enabled CSLogin "Load JQuery: YES", the login popup (Modal) is not working!!
Im using Helix Ultimate Template by joomshaper, Joomla! 3.10.2
Can you please tell me what is the issue?
The topic has been locked.
Support Specialist
2 years 5 months ago #67559 by alzander
Can you please let us know a URL where we can see the issue? We'd need to be able to see the problem to be able to diagnose it.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
2 years 5 months ago #67563 by milad1
Thanks for the reply I just send it to you privately from the contact us page. Did you receive it?
But we can continue to talk here.
The topic has been locked.
Support Specialist
2 years 5 months ago #67566 by alzander
Thanks for sending the link.

I'm not 100% sure what's going wrong there. There's a few things that may be causing problems:
* The template is loading bootstrap 5's Javascript. JFBConnect expects an earlier version of Bootstrap for Joomla 3 though.
* There is a bunch of Javascript which seems to be targeting the CSS ID "#login-modal" in the HTML that looks like:
jQuery(function($){
        $("input[type='file'][name^='jform[improved]']").each(function(){
          $(this).next().next().html(this.size + "MB");
        });
        });
template="shaper_helixultimate";
jQuery(document).ready(function($) {
   $('#login-modal').on('show.bs.modal', function() {
	if ($('#login-modal').hasClass('hide')) {
		$('#login-modal').removeClass('hide');
	}
       $('body').addClass('modal-open');
       $('.modalTooltip').each(function(){;
           var attr = $(this).attr('data-placement');
           if ( attr === undefined || attr === false ) $(this).attr('data-placement', 'auto-dir top-left')
       });
I'm unsure what that's doing, but it's likely conflicting with what the modal popup is expecting to happen. If there's a way to remove/disable this code, I'd recommend doing so as I'm unsure of it's function or how it will affect the SCLogin modal.
* There are 2 instances of the SCLogin module on that page. One in the header bar and one in the mobile menu that shows up when the screen is too small. While 2 SCLogin modules should work, I'd recommend removing one (temporarily) to help narrow down the investigation.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
2 years 5 months ago - 2 years 5 months ago #67574 by kingdm
I'm having a similar issue. I updated a website from 3.9.28 to 3.10.3 yesterday. The 3.9.28 website has only one script that contains #login-modal, but the 3.10.3 website has 2 scripts that contain #login-modal. One references JCaption and the second is the SourceCoast login script.

Here's what the JCaption script looks like in the 3.9.28 website:

<script>
jQuery(window).on('load',  function() {
                new JCaption('img.caption');
            });
if (typeof jfbcJQuery == "undefined") jfbcJQuery = jQuery;
    </script>

And here's what it looks like in the 3.10.3 site:

<script>
    jQuery(window).on('load', function() {
        new JCaption('img.caption');
    });
    jQuery(document).ready(function($) {
        $('#login-modal').on('show.bs.modal', function() {
            $('body').addClass('modal-open');
            $('.modalTooltip').each(function() {
                ;
                var attr = $(this).attr('data-placement');
                if (attr === undefined || attr === false)
                    $(this).attr('data-placement', 'auto-dir top-left')
            });
            $('.modalTooltip').tooltip({
                'html': true,
                'container': '#login-modal'
            });
        }).on('shown.bs.modal', function() {
            var modalHeight = $('div.modal:visible').outerHeight(true),
                modalHeaderHeight = $('div.modal-header:visible').outerHeight(true),
                modalBodyHeightOuter = $('div.modal-body:visible').outerHeight(true),
                modalBodyHeight = $('div.modal-body:visible').height(),
                modalFooterHeight = $('div.modal-footer:visible').outerHeight(true),
                padding = document.getElementById('login-modal').offsetTop,
                maxModalHeight = ($(window).height() - (padding * 2)),
                modalBodyPadding = (modalBodyHeightOuter - modalBodyHeight),
                maxModalBodyHeight = maxModalHeight - (modalHeaderHeight + modalFooterHeight + modalBodyPadding);
            if (modalHeight > maxModalHeight) {
                ;
                $('.modal-body').css({
                    'max-height': maxModalBodyHeight,
                    'overflow-y': 'auto'
                });
            }
        }).on('hide.bs.modal', function() {
            $('body').removeClass('modal-open');
            $('.modal-body').css({
                'max-height': 'initial',
                'overflow-y': 'initial'
            });
            $('.modalTooltip').tooltip('destroy');
        });
    });
    </script>

Both sites are accessible if you would like to view the source.
3.10.3 site: nobot.org/stage/index.php
3.9.28 site: nobot.org/members/index.php

I also see the different jq-bootstrap versions. If anyone can provide guidance on how to get the modal login in the 3.10.3 website to work, I would appreciate it. 
Last edit: 2 years 5 months ago by kingdm.
The topic has been locked.
Support Specialist
2 years 5 months ago #67578 by alzander
Kingdm,
SCLogin v9 updates how we create our modal and requires updated CSS. Your site looks to have an old override for the CSS using SCLogin v8 code.

Can you please remove the following file, which is your override, and see if the modal begins working properly again:
templates/nobot/html/mod_sclogin/themes/default.css

If you need to update the styles, please copy the file from the directory below to your template's override folder and make any new changes there:
/media/sourcecoast/themes/sclogin

Please let us know how that goes.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
2 years 5 months ago #67579 by kingdm
Thank you for the information. I was able to work around the issue by installing the SCLogin v8 plugin and adding a script to the header that loads the older bootstrap version 1.8.3.js. But, I will try your fix as I really want to use v9.
The topic has been locked.
Active Subscriptions:

None
2 years 5 months ago #67580 by kingdm
I deleted the mod_sclogin override folder and tested the v9 login module with both the default and sourcecoast templates, but neither would work as a modal box. I will use the v8 version for now until I have more time to look into what's causing the issue. Thanks again.
The topic has been locked.
Support Specialist
2 years 5 months ago #67582 by alzander
Alright. I'm sorry you weren't able to get it to work. If you are able to install the v9 release on a test site again, without any template overrides, we'll gladly investigate what may be the issue further.

Thanks,
Alex
The topic has been locked.
Active Subscriptions:

None
2 years 5 months ago #67584 by kingdm
I've reinstalled v9 and deleted the override folder. Site is here: nobot.org/stage/index.php
The login link is in the top left corner above the round logo. It will be moved to top right when I can get it to work. Let me know if you have any questions and thank you for your help!
The topic has been locked.