Alert message to window modal

[Danieleeffe1]

Target:
create a modal window

where is it:
On page production

What it should do:
Open the confirmation / error message in modal window

What did I do:
(premise) I'm not a developer, I'm less of a beginner.
I don't know the rules let alone the OpenMage interpolation mechanics
Not being a developer I googled and found this general tutorial:
https://www.w3schools.com/howto/howto_css_modals.asp

After trying to understand how it works I tried changing view.phtml to
app / designe / frontend / rwd / myteme / template / catalog / product

and the message.phtml file in app / designe / frontend / rwd / myteme / template / core / adding

the goal was to add tutorial-inspired script and css files
I thought it would be enough to modify the w3c script by replacing the names of the "class" and "id"

my reasoning:
when you click on addtocart openmage does its checks then calls the message.phtml module
I change the code and insert the "id"

original code:

<? php foreach ($ types as $ type) {
            if ($ messages = $ this-> getMessages ($ type)) {
                if (! $ html) {
                    $ html. = '<ul class = "messages">';
                }
                $ html. = '<li class = "'. $ type. '-msg">';
                $ html. = '<ul>';
                foreach ($ messages as $ message) {
                    $ html. = '<li>';
                    $ html. = $ message-> getText ();
                    $ html. = '</li>';
                }
                $ html. = '</ul>';
                $ html. = '</li>';
            }
        }
        if ($ html) {
            $ html. = '</ul>';
        }
?>

to so:

<? php foreach ($ types as $ type) {
            if ($ messages = $ this-> getMessages ($ type)) {
                if (! $ html) {
                    $ html. = '<ul id = "myModal" class = "messages">';
                }
                $ html. = '<li class = "'. $ type. '-msg">';
                $ html. = '<ul>';
                foreach ($ messages as $ message) {
                    $ html. = '<li>';
                     $ html. = '<span class = "closex"> & times; </span>' $ message-> getText ();
                    $ html. = '</li>';
                }
                $ html. = '</ul>';
                $ html. = '</li>';
            }
        }
        if ($ html) {
            $ html. = '</ul>';
        }
?>

Once modified I expected to see the ul with class "message" generated also with the id "myModal", but if I do the test after cleaning the cache this does not happen.

I then wanted to attach the following modified script so that when the message.phtm file was loaded, the message would be displayed in modal mode.

<script>
// Get the modal
var modal = document.getElementById ("myModal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName ("close") [0];

// When the user clicks the button, open the modal
window.onload = function () {
  modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
  modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

can it be done at least or am I just wasting time?

[addison74]

Over the years there were a lot of extensions available that show you in a modal window what you added to cart/comparison/wish list. You should search them with Google. I am pretty sure on Stack Exchange there are solutions to this issue, also blogs for a small implementations.

You can create it from scratch but you should ask for support and you may already see we are only a few who reply.

[Danieleeffe1]

I thank you for the answer

i have searched, tried many ajax-add-to-cart modules but none work correctly.

The solutions I found on Stack Exchange lead either to the example I reported or to much more complex solutions for me that refer to other Magento / OpenMage sections.

maybe I don't know how to ask the question to find the solution.