Для реализации открытия модального окна с информацией о товаре вместо перехода на страницу при нажатии на mSearchForm, вам необходимо:
1. Создать модальное окно с помощью HTML и CSS. Ниже приведен пример простого модального окна:
```html
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<div id="productInfo"></div>
</div>
</div>
```
CSS стили для модального окна:
```css
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
```
2. Добавить JavaScript код, который будет отвечать за открытие и закрытие модального окна, а также заполнять его информацией о товаре. Вот пример:
```javascript
var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
function openModal(product) {
var productInfo = document.getElementById("productInfo");
productInfo.innerHTML = "Информация о товаре: " + product;
modal.style.display = "block";
}
function closeModal() {
modal.style.display = "none";
}
span.onclick = function() {
closeModal();
}
window.onclick = function(event) {
if (event.target == modal) {
closeModal();
}
}
```
3. Изменить функцию поиска товаров на вашем сайте для вызова функции openModal() при выборе товара из результатов поиска. Например:
```javascript
function searchProducts() {
// Ваш код поиска товаров
// Пример вызова openModal() при выборе товара из результатов
var selectedProduct = "Название товара";
openModal(selectedProduct);
}
```
Теперь при нажатии на mSearchForm будет открываться модальное окно с информацией о товаре, вместо перехода на отдельную страницу.
Чтобы изменить функцию поиска товаров на сайте, чтобы при выборе товара из результатов поиска он открывался на отдельной странице, можно использовать следующие шаги:
1. Создать отдельную страницу для отображения информации о товаре. Например, `product.html`.
2. Изменить результаты поиска на ссылки на отдельную страницу товара, передавая информацию о товаре в URL. Вот пример:
```html
<a href="product.html?productId=123">Название товара</a>
```
3. На странице `product.html` использовать JavaScript для получения информации о товаре из URL и отображения этой информации. Примерно так:
```javascript
window.onload = function() {
var productId = getUrlParameter("productId");
var productInfo = getProductInfo(productId); // Функция, которая получит информацию о товаре из базы данных или другого источника
// Добавить код для отображения информации о товаре на странице
}
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}
```
Теперь, при выборе товара из результатов поиска, он будет открываться на отдельной странице `product