WebSite X5Help Center

 
Axel  
Axel  
User

Kolasim, need your help please....  fr

Автор: Axel  
Просмотрено 502, Подписчики 1, Размещенный 0  

Hello,

Sometimes it could be nice to offer a solution to display a message on a specific page for the customer.
Like Paypal has some issues with the AD Blocker plugin into Chrome my idea should be to offer a way to display a nice popup (not the default JS)to prevent the user to do something to be sure to avoid any issue.

Here my code into a single HTML page (outside of WSX5 is to display this customizable popup)

The main issue here is to configure the link to the button 'Close '. It does not works... probably because it is inside a Jquery request... I cannot found the good syntax to create the link on this button...

Your help would be useful on this wink

Now it should be nice to include this one into the page where the boutik is configured (it is an example). The best way to do that is to include this code into the page properties and not into an HTML object to be executed at page starting.

So I have included my code below into the page properties.

<html>

<head>
<meta charset="UTF-8">

<!--
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>
-->
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js'>

</head>
<body>

<form>
<!-- <button id="generate"type="button" onclick="notify_afs(BoxType, MonTitre, MonMessage)">Demo</button> -->
<a href="https://www.afsoftware.fr" target=_blank> </a>

</form>

<!-- Pour fenetre -->
<div id="notification" class="modal fade" >
<!-- Centrage fenetre -->
<div class="modal-dialog modal-sm">
<!-- Pour afficher la fenêtre -->
<div class="modal-content">
<div class="modal-header" style="background-color:#F0F0F0; border-radius:00px">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title"><i class="text-danger fa fa-exclamation-circle"></i>&nbsp;Error</h4>
</div>
<div class="modal-body">
<p>An error occurred...</p>
</div>

<div class="modal-footer" style="background-color:#F0F0F0 border-radius:00px">
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button> -->

<!-- <input class="btn btn-default" data-dismiss="modal" type="button" value="Fermer1"> -->

</div>
<!-- Fin affichagefenêtre -->

</div>
<!-- Fin centrage->
</div>
<!-- Fin fenetre -->


<script>

notify_afs = function(boxtype, title, message){

var IconColor;
var IconSize;

switch (boxtype){
case "Success": /* box type */
icon = "fa-check-circle"; /* Icons from https://fontawesome.com/icons?d=gallery */
IconColor = 'green'; /* Icon color */
IconSize = '30px'; /* Icon size */
break;
case "Info":
icon = "fa-info-circle";
IconColor = 'blue';
IconSize = '30px';
break;
case "Warning":
icon = "fa-exclamation-triangle";
IconColor = 'orange';
IconSize = '30px';
break;
case "Error":
icon = "fa-times-circle";
IconColor = 'red';
IconSize = '30px';
break;
default:
}



$("#notification .modal-body p").text(message);
$("#notification .modal-title").html('<i class=" fa ' + icon + '" style="color:' + IconColor + ';font-size:'+ IconSize+' " ></i>&nbsp;' + title);
// $("#notification .modal-title").html('<i class="' + color + ' fa ' + icon + '" ></i>&nbsp;' + title);
// $("#notification .modal-footer").html ('<div style="float:left;"> <a href="https://www.afsoftware.fr" target=_blank> <strong> <font face="Verdana" color="#CC0000"> <span style="font-size:8pt;">www.afsoftware.fr</span> </font> </strong></div> </a><button type="button" class="btn btn-default" data-dismiss="modal">Fermer2</button>');
$("#notification .modal-footer").html ('<div style="float:left;"> <a href="https://www.afsoftware.fr" target=_blank> <strong> <font face="Verdana" color="#CC0000"> <span style="font-size:8pt;">www.afsoftware.fr</span> </font> </strong></div> </a href="https://www.afsoftware.fr"><button>Close 9</button></a>');
$("#notification").modal("show");
}
</script>


<script>
var MonTitre = 'Example of info message1';
var BoxType = 'Success'; // Success or Info or Warning or Error
var MonMessage = 'Do not forget to desactivate your AD Blocker to avoid payment issue !!!';

var a= 10;
var b = 200;

if (b > a ) {
notify_afs(BoxType, MonTitre, MonMessage);
}
else
{
var MonTitre = 'Titre AF Software Error';
var BoxType = 'Error'; // Success or Info or Warning or Error
var MonMessage = 'Errreur 1 !!!';
notify_afs(BoxType, MonTitre, MonMessage);
}

</script>

</body>
</html>

I have tried many things into the page properties to expand each code on the good each tag.... but no good result.

And now I have this one.

The popup is not on the top middla os the screen and the page is not correct... And also the Close button does not works... (may be first issue on the top of my message)

If you can help me on this it could be a nice option to help users to create their own popup on any page.

Thanks you

Axel

Размещено
29 Ответы - 1 Полезно - 1 Корректно
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

ciao, ...... malheureusement pour moi votre code contient plusieurs irrégularités, et ça ne fonctionne pas pour moi...
...peut-être que le code a été ruiné ici lors du copier/coller...
... joignez ici le code original correct au format ZIP...
... publiez également le LIEN sur votre page de test en ligne...

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

OK.

here the standalone html zipped file. Working for me outside of WSX5 

and the link https://wsx5demo.afsoftware.fr/testpopup.html

The page is completly shifted

Thank you

tongue-out

Читать больше
Размещено От Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...dans votre code, remplacez cette chaîne de code :
<button>Close 9</button>
...avec cette chaîne de code :
<button data-dismiss="modal">Close 9</button>

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

Not working... foot-in-mouth click is ok now, but the page is always blank .....  and the href into the <a> tag is not used.

And the page is always not correct. 

Читать больше
Размещено От Axel  
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

Hello KolAsim,

I found this one to activate the link on the button.

I replaced this line:
<a href="https://www.afsoftware.fr"><button class="btn btn-default" data-dismiss="modal">Close11</button></a>');

by:
<a href="#" target="_self" class="btn btn-default" role="button">Close 12</a> ')

If I modify the href with an URL, the link is ok

But the goal is to close the popup and to stay on same page and NOT to reload it to avoid to display agin the popup.!

And the second issue is the page shifted.

Again thanks wink

Читать больше
Размещено От Axel  
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

Now I have added data-dismiss. The popup is closed but on a blank page !

and the line is

<a class="btn btn-default" href="#" role="button" data-dismiss="modal" >Close 12</a>

Читать больше
Размещено От Axel  
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

Other issue is if I click outside of the popup the page is blank too.

Читать больше
Размещено От Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... Je me suis toujours appuyé sur votre fichier ZIP, il y a quelques erreurs...
1) ... une balise <a> mal ouverte (</a>)!;
2) ... un commentaire avec une fermeture incorrecte incorrect(->)!;
3) ... un <div> manquant de la balise de fermeture (</div>)!;
...
... pour pouvoir vérifier j'ai ajouté une chaîne de texte dans le corps...
...
... le fichier ZIP correct est joint...

.

ciao

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

thank you...

I have included you new code.

The popup OK on the page which is not shifted  wink

The button close the popup and we are staying on same page.

Juste on thing... clicking outside the button as same effect than close button... not possible to block this to force the user to click on the button

Читать больше
Размещено От Axel  
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

Other issue... With the installed code the menu is not displayed

And after clicking not any more.

Читать больше
Размещено От Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator


...Je ne vois aucun menu...
...vous avez un mauvais code sur la page ; .. ouvrez les sources dans Firefox et vous les remarquerez surlignées en rouge, puis apportez les corrections nécessaires...
...
...pour désactiver le clic latéral dans la balise de script, ajoutez cette chaîne de code :

$(" .modal-content").parent().wrap('<div style="z-index:10;position:absolute;width:100%;height:100%"> </div>');

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

Je viens d'ajouter ce code et le clic est OK uniquement dans le popup. Super !!! ca avance :-)laughing

Si j'enlève le code des propriétés de la page, le menu s'affiche comme cela.

En mettant le code, le menu ne s'affiche plus !

Et dans les sources il est bien dans le code

Dans Firefox je ne vois pas d'erreur en rouge sauf pour un &times et un &nbsp sur ces 2 lignes

<buttontype="button" class="close" data-dismiss="modal" aria-label="Close"><spanaria-hidden="true">&times;</span>

</button><h4class="modal-title"><iclass="text-danger fa fa-exclamation-circle"></i>&nbsp;Error</h4>

Читать больше
Размещено От Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...Je ne sais pas si cela peut dépendre de cela, mais il y a quelques erreurs dues à du code supplémentaire:

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

Oui j'ai vu après. J'ai nettoyé ces balises ....

Ce qui bloque l'affichage du menu c'est cela !!!!

Et si je met ces lignes ici comme il faudrait faire ci dessous plus rien ne fonctionne

Une dernière idée ? car le reste est OK 

Читать больше
Размещено От Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...J'ai maintenant vérifié votre page et la source est maintenant sans erreurs apparentes, ...OK...
...mais je ne vois pas le MENU, et je ne sais pas pourquoi cela se produit...
...malheureusement, je n'ai pas de PC avec le programme et je ne peux pas faire les tests...
...
... cependant, vous supprimez tout le code EXTRA que vous avez inséré dans la page...
... puis collez l'intégralité du fichier ZIP  joint dans un objet de code HTML...
...ou vous le collez dans Expert dans la dernière (6ème) option : Avant de fermer la balise BODY...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

J'ai copié le code dans la partie expert avant de fermer la balise BODY.

Cela fonctionne mais PAS DE MENU

Dans un objet HTML voila le résultat. Popup non actif et pas de menu.

Mais comme je l'ai dit plus haut le menu est dans les sources mais c'est bizarre il est considéré comme mobile hidden !!!

Читать больше
Размещено От Axel  
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

Hey Toc toc

I found how to display the menu. I have change the bosstrap code into the <head> byt his one

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

And now the menu is displayed correctly 

But now the issue is the displaying of the popup which is not correct

Previously

And now

  • Position of www.afsoftware.fr
  • Position of the x 
  • Police sizing
  • Button size

How to get the previous visual ?

Thanks

Читать больше
Размещено От Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... si tu veux je te laisse essayer ma simple invention universelle avec mon div_custom+iframe...
... si vous êtes intéressé, préparez une page cachée et sans appliquer les graphiques, contient le contenu, le message et le lien que vous souhaitez voir apparaître dans le message, dans une seule cellule max de 450px, ou un groupe de cellules de max 450px au total. ..
...
quand tu as posté le lien ici...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

No div_customiframe into lastest zip file previously

Читать больше
Размещено От Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... non, non, ce n'est pas là, et une autre chose personnelle à moi...
... après avoir publié le lien vers la page masquée et formatée comme mentionné précédemment, je pourrai l'évaluer et je vous le ferai savoir...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...maintenant je vois que le menu fonctionne..
...supprimez ce texte :
Test x CORPS - KolAsim

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... peut-être que je n'ai pas compris ; ...Je vois tout blanc et la bannière semble fonctionner correctement...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

tu as dit ...."sans appliquer les graphiques" j'ai donc supprimé le header / footer... je les remets

Читать больше
Размещено От Axel  
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

mais ici https://wsx5demo.afsoftware.fr/testpopup.html

tout fonctionne.

J'ai supprimé le X pour fermer et le lien du site web...

On va rester comme cela je pense !

Читать больше
Размещено От Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

...OK... ça marche...

.

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

Un grand merci pour ton aide tongue-out

Читать больше
Размещено От Axel  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... ciao ... wink

Читать больше
Размещено От  ‪ KolAsim ‪ ‪
Axel  
Axel  
User
Автор
Лучший пользователь месяца FR

Pour ceux qui ont jeter un oeil sur ce post, j'ai conclut en postant une explication complète pour aider chacun d'entre vous.

Le post est ici: https://helpcenter.websitex5.com/ru/post/261349

Encore Merci à KolAsim pour m'avoir assisté et que nous ayons pu proposer cette solution.

Axel

Читать больше
Размещено От Axel