Log in | Register
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. To add a Direct Link Modal popup - BUG

Topic-icon To add a Direct Link Modal popup - BUG

Active Subscriptions:

None
3 years 11 months ago #66286 by joomleb
Hi guys,
PHP 7.3.17 + Joomla 3.9.18 + Helix Ultimate 1.0.2 template framewor + SP Page Builder 3.7.2 + JFBConnect 8.4.0

- I have the SCLogin loaded on all pages in the offcanvas position - here on my test site
- On this SP Page I added the add a direct link code <a class="btn btn-primary" href="#login-modal" data-toggle="sc-modal">Login</a>
- When I clic on the Login button nothing happen, just the "#login-modal" is appended to the link
- As suggested by Alex , I tested it also with "JFBConnect, > Configuration > Load jQuery / Bootstrap: Yes" and / or with "SCLogin > Advanced > Load jQuery: Yes", but without success...

Please, Can you help on solving it ?
(I'm going to send Super Admin access on my test site to Alex and to Mel)
The topic has been locked.
Support Specialist
3 years 11 months ago #66287 by mel
1. If you switch the SCLogin to modal view, it's slightly different than what we suggest with
<a class="btn btn-primary" href="#login-modal" role="button" data-toggle="modal">Login</a>
instead of
<a class="btn btn-primary" href="#login-modal" data-toggle="sc-modal" role="button">Login modal popup</a>
Our suggestion may be out of date.

2. Looking at your page, the offcanvas has SCLogin configured in the form layout, not modal. My thought is when the link is pressed, there's nothing actually to toggle, because the login-modal is not actually on the page. We have the idea to create a second copy of the SCLogin module and having that be loaded. Can you tell me the exact file that you added that direct link to, so we can test that?

-Melissa
The topic has been locked.
Active Subscriptions:

None
3 years 11 months ago #66288 by joomleb
Hi Mel,
thanks for your reply. So, following your instructions:

- I have the SCLogin loaded on all pages in the offcanvas position - here on my test site - Temporarily, for this test, I set its Login View Settings: "Modal Popup"
- On this SP Page Builder page: Salud I added the add a direct link code <a class="btn btn-primary" href="#login-modal" role="button" data-toggle="modal">Login modal popup</a>
- So, I added the code using the "SP Page Builder Pro 3.7.2 > Alert add-on > Source text editor" (Page: Salud)
- Now, When I clic on the "Login modal popup" button something happen, but the modal popup is not loaded
- Also if I clic on "Login" in the SCLogin from the offcanvas position the modal popup crash.

- As suggested by Alex , I tested it also with "JFBConnect, > Configuration > Load jQuery / Bootstrap: Yes" and / or with "SCLogin > Advanced > Load jQuery: Yes", but with the same result...
The topic has been locked.
Support Specialist
3 years 11 months ago #66296 by mel
All right. Some progress

1. In SP Page Builder, I added a Joomla module for the second instance of the SCLogin module that I created. After this was added, your button started attempting the popup. So as suspected, without an SCLogin on the page that was in the modal format, there was nothing to toggle. If you can keep this module and get rid of your manual link you added, I think this will get you mostly there. (I've kept both on the /salud page for now)

2. When something happens (the screen grays out but the modal is not showing), it's because a style needs to be updated. The modal is there but not visible. Change opacity to 1 instead of 0.
.sourcecoast.modal.fade {
opacity: 1;
}

-Melissa
The topic has been locked.
Active Subscriptions:

None
3 years 11 months ago #66302 by joomleb
Hi Mel,
many thanks, I added the Custom CSS and tested the page here , but I have back a lot of unwanted Issues / Bugs:

A - Is the button div necessary ?!? Because I need the button into the sentences
B - The overlay effect is not running well, as you can see it does not cover the header as it is happening when I open the canvas (compare them)
C - The modal popup is not centered, it is positioned on the left of the screen
D - The "X" Close is not running - when clicking on it do not happen nothing
E - The "X" Close should be into the modal-body, not the modal-header, Can it be moved ?
F - Why there is a padding-right: 15px; in the div#login-modal element.style ? In this way the content cannot be centered...
G - .sourcecoast .modal-body { width: 94%;} - Is it necessary ?!? Can be deleted (100&) ?
H - The modal width and height "auto" are not respected, How to have them running on 100%
I - How do you think to solve the must to have a double Module published? Do you have any ideas? (Sure we cannot add it into the content"
The topic has been locked.
Support Specialist
3 years 11 months ago #66331 by mel
A. So the second button needs to be on the page, so your text knows what to popup. However, you can easily hide this with CSS:
.sp-module div.sclogin {
display: none;
}

B. Change the position of #login-modal to
#login-modal {
top: 0;
}

C. More CSS
.sourcecoast.modal {
left: 70%; /* or whatever value that gets it centered */
}

F. and G.
You can change whatever CSS you want. However, I would advise you make you own theme to use for SCLogin so that any changes you make don't get lost when you upgrade SCLogin. Check out documentation here

H. I'm not sure what you mean here. But you can change CSS and add it to your theme.

I. See A for hiding the module
The topic has been locked.
Active Subscriptions:

None
3 years 11 months ago #66333 by joomleb
Hi Mel,
many thanks, I'm going to test all and, yes, maybe it is better to have a dedicated layout for this. Thanks for the link.

H - I mean, the modal right now is really too big compared with the content. Please, How to set the modal popup width and height to "auto" fit the content ?
The topic has been locked.
Support Specialist
3 years 11 months ago #66335 by mel
For the width, just set it on the ".sourcecoast.modal" element. For example:
#login-modal.sourcecoast{
width: fit-content;
}
The topic has been locked.
  1. Forum
  3. Non-Commercial Extensions
  5. SCLogin Enhanced Login
  7. To add a Direct Link Modal popup - BUG
From the Blog
Facebook | Twitter | LinkedIn | Blog RSS