CSS3 настолько мощная штука, что некоторые неправильно называют такие вещи как animate.css библиотеками, а я взял и повторил это.

Ну если таким образом трактовать, то и табурет вполне можно называть столом. :) Это как с чей-то легкой руки назвали обычный слой ранжируемый поверх всех с затенением остального и прочей хренью модальным окном, что к окну, а тем более модальному диалогу, не имеет вообще никакого отношения. И бывают и путаницы из-за такой вольности, когда "а" и "в" не понимают друг друга во время диалога. В JS есть три модальных диалога - alert, confirm и promt, плюс в IE существуют еще два - showModalDialog и showModelessDialog, все остальное чушь полнейшая, как бы их кто-то не называл, хоть супер модальные, от этого они ими не станут. Более близкое по смыслу к библиотеке, это набор js-функций и т.п. подключаемых, а css, это правила стилей, равно как, например, в подключаемом json описание опций, конфигураций и пр.

В скриптовых языках к библиотекам "прижился" термин модули, а в РНР их называют расширениями, хотя это чистой воды библотеки написанные на С, Delphi и прочих. Для Win платформы они имеют расширения .dll, для Unix .so. Те что прописаны в php.ini загружаются в процессе сборки, но можно вызвать и динамически функцией dl().

Эти штатные модальные окна настолько убогие, что приходится писать свои "ранжируемые поверх всех с затенением остального". Поэтому и стали их так называть. Я бы назвал такой слой аля-модальное окно ))

Убогие или нет, но свою задачу они выполняют на все 100, а "аля-модальное", даже и на аля не тянет. Вот вам диалоги не убогие, это практически полноценные приложения, с гораздо большими возможностями чем confirm и promt. Как видите во всех браузерах открывается, но все это симуляция кроме в IE. Откройте эту ссылку в IE и посмотрите, чувствуется разница.

Ясен хрен.

The user cannot switch to the opener window until the modal dialog is closed.

Вот поэтому не тянут.

Здрастье, это как раз одна из задач модального диалога, а всякие аля этого просто не могу сделать, обойти эту "аля модальность" как два пальца ...

Вы можете в Chrome DevTools выбрать на сайте нужный элемент и увидеть всю цепочку наследовании CSS. И можете менять стили элемента «вживую»! Рабочие пространства Chrome DevTools позволяют вам сохранить изменения в файле на сайте, внесенные вами в Devtools, в локальную копию того же файла на вашем компьютере. Например, предположим:

• У вас есть исходный код вашего opencart проекта на рабочем столе.
• Вы используете локальный веб-сервер (корень сайта — каталог исходного кода), так что ваш сайт доступен, например, по адресу localhost:8080.

Так что когда вы откроете localhost:8080 в Google Chrome, и вы будете использовать DevTools для изменения CSS сайта, то при включенных рабочих пространствах, изменения CSS, которые вы вносите в DevTools, сохраняются в исходном коде вашего opencart проекта. (localhost:8080 — это как пример, на самом деле может быть любой адрес)

Самый простой способ добавить папку проекта в рабочее пространство — открыть в Chrome DevTools панель Sources и перетащить туда папку. (https://youtu.be/DJfdjdlSJho?t=56)

А исходники? Хотя вы теперь знаете, что это не проблема!

Я заметил, что иногда рекомендуете устанавливать Open Server, почему не более приближённое к реальности, например, при помощи docker? (Как начать с docker? https://www.youtube.com/watch?v=VzzwnsLX_5o Краткое описание… https://habr.com/ru/post/309556/)

А с чего вы взяли, что это класс? cart — это экземпляр класса Object. Даже если написать отдельный класс Cart, то его всевозможные экземпляры будут выполнять одно и тоже.

Если вы хотите, чтобы cart был экземпляром класса Cart, то вы можете сделать так...

function Cart() {
	throw new TypeError("Illegal constructor");
}

Object.defineProperty(Cart, Symbol.hasInstance, {
	value: instance => cart === instance
});
Cart.prototype = cart;
Cart.prototype.constructor = Cart;

/* долгожданное наследование */
class SuperCart extends Cart {
	myNewMethod() {}
}

/* теперь вместо cart используйте myCart */
const myCart = Object.create(SuperCart.prototype);

// > cart instanceof Cart
// < true
// > myCart instanceof Cart
// < true
// > myCart.add
// < ƒ (product_id, quantity)

Но действительно ли вам нужен класс в данном случае? Вы исходили из ложной предпосылки, что cart — класс, а на деле это — объект типа Object.

Дело в том, что это не класс, а объект (экземпляр класса Object). Вы можете дописать в объект нужные функции и свойства...

Object.assign(cart, {
	myNewMethod: function() {}
});

Всё верно, это библиотека CSS анимации. Что может быть странного и удивительного в том, чтобы часто используемые анимации вынести в отдельную библиотеку? Вот ещё больше полезных библиотек CSS анимации — https://css-tricks.com/css-animation-libraries/

Обычные программы тоже могут быть оформлены при помощи CSS — Skype, Discord, WhatsApp, Visual Studio Code и пр. И даже операционная система — Chrome OS.

Такой вещи вообще не существует! Никто не может точно сказать и определить, что это такое! (Я спрашивал, человек, говорит — «ну там transform есть в CSS3...» смотрим в документацию — а там — CSS Transforms Module Level 1, вообще отдельный модуль!)

На самом деле уже с 2007 года существует «CSS Snapshot» (т.е. «снимок» состояния CSS) — периодически обновляемый документ (https://w3.org/TR/css), один из разделов которого называется — «Официальное определение CSS».

Модальное окно — окно, которое блокирует работу пользователя с приложением до тех пор, пока пользователь это окно не закроет.

Стоит учитывать, что showModalDialog раньше работал и в Firefox и в Chrome (Ещё работает в Safari, но планируется к удалению), но в последствии был объявлен устаревшим и удалён, поскольку существует стандартизированное и более гибкое решение, которое предоставляет спецификация HTML.

«Модальное» и «блокирующее выполнение скриптов» — это не одно и тоже. «Модальное» означает поверх всего остального, предотвращение взаимодействия с остальным. Таким образом, например, диалоги jQuery UI являются модальными, но они не блокируют выполнение скриптов.

Почему window.showModalDialog был объявлен устаревшим?
В общем, идея реализации диалогового окна в браузере была действительно хорошей идеей, но window.showModalDialog было плохой реализацией, изобилующей проблемами.

Модальное диалоговое окно, созданное при помощи showModalDialog, содержит полноценный документ HTML, а не фрагмент кода. На самом деле это просто два совершенно разных окна, взаимодействующих друг с другом. Но в основном это просто добавляет ненужную сложность, усложняет реализацию браузера и вносит ряд ошибок.

Хотя важно, чтобы модальные диалоги не позволяли пользователю взаимодействовать с исходным окном, нет никаких причин, по которым ему нельзя разрешать взаимодействовать с другими вкладками или встроенными элементами управления браузера (назад/вперёд, избранное, адресная строка и пр.)

Что использовать взамен? Спецификация HTML 5.3 представляет элемент <dialog>, который используется для отображения диалогов, включая модальные.

Элемент <dialog> представляет часть приложения, с которой пользователь может взаимодействовать, чтобы выполнить определённую задачу — диалоговое окно.

На данный момент диалоговые окна полностью поддерживаются в Chrome и Opera, в Firefox — частичная поддержка под флагом, а остальные — нет (решается при помощи полифила, но что тебе стоит потребовать у разработчиков твоего любимого браузера все доделать?)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- polyfill -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dialog-polyfill/0.5.0/dialog-polyfill.min.js"></script>
	<script>
if("showModal" in document.createElement('dialog') === false)
new MutationObserver(function(mutationsList, observer) {
	mutationsList.forEach(function(mutation) {
		mutation.addedNodes.forEach(function(node) {
			if(node.tagName === "DIALOG" && "showModal" in dialog === false)
				dialogPolyfill.registerDialog(node);
		});
	});
}).observe(document.documentElement, { childList: true, subtree: true });
	</script>
	<!-- end of polyfill -->
</head>
<body>
	<button id="button">open modal dialog</button>
	<dialog id="dialog">
 		<form method="dialog">
 			<h1>Hi!</h1>
			<p>I am a modal dialog.</p>
			<button>Close me</button>
		</form>
	</dialog>
	<script>
		button.addEventListener("click", event => {
			dialog.showModal();
		});
	</script>
</body>
</html>

Malleys, скучно? :)

Долго объяснять, да и проблем передать на сервер и там развернуть нет, хоть и под умершим Денвером делать.

В opencart нет никакого класса cart на клиенте, там всего лишь несколько $.ajax запросов, реализация же ее на сервере.

За модальное окно, спасибо конечно, но оно мне ... ей богу, без обиды, мне даже прочесть это некогда, тут без них проблем своих хватает. :)

Malleys, я потом, как освобожусь, почитаю чего там вместо модального. ;)

Почему showModalDialog плох как и другое от мелксофта, это известная притча во языцех, только ленивый об этом еще не сказал. :)

Вообще-то, showModalDialog как и другие модальные диалоги, окна, это дочерние приложения родительского приложения, дочерние формы MDI, которым можно задать различные стили как-то размеры управляемые или нет, только рамка или с заголовком с кнопками и меню, и т.п.

А вот <dialog>, это интересно.