Несколько модалок на js

@Mailo · Регистрация: 18.02.2010

Студворк — интернет-сервис помощи студентам

Заюзал вот этот скрипт для модалок

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//modal window
function Modal(e){
    this.modal = document.querySelector('.modal');
    this.overlay = document.querySelector('.overlay');
    this.close_btn = document.querySelector('.close_btn');
    let popup = this;   
 
    this.open = function(){
        popup.overlay.classList.add('m_open');
        popup.modal.classList.add('m_open');
    }
 
    this.close = function(){
        popup.overlay.classList.remove('m_open');
        popup.modal.classList.remove('m_open');
    }
 
    this.overlay.onclick = popup.close;
    this.close_btn.onclick = popup.close;
}
 
let pop = new Modal();
 
document.querySelector('.m_btn').onclick = function(e){
    pop.open();
    e.preventDefault();
}

Но он вроде как на одну модалку только, а у меня на сайте их несколько, немного дополнил его, что бы сработала вторая + ещё одна кнопочка закрытия была

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
//modal window 2x
function Modal(e){
  this.modal = document.querySelector('.m_login');
  this.modal2 = document.querySelector('.m_application');
  this.overlay = document.querySelector('.overlay');
  this.close_btn = document.querySelector('.close_btn');
  this.close_btn2 = document.querySelector('.cb2');
  this.close_btn3 = document.querySelector('.ma_close');
  let popup = this; 
  this.open = function(){
    popup.overlay.classList.add('m_open');
    popup.modal.classList.add('m_open');
  }
  this.open2 = function(){
    popup.overlay.classList.add('m_open');
    popup.modal2.classList.add('m_open');
  }
  this.close = function(){
    popup.overlay.classList.remove('m_open');
    popup.modal.classList.remove('m_open');
    popup.modal2.classList.remove('m_open');
  }
  this.overlay.onclick = popup.close;
  this.close_btn.onclick = popup.close;
  this.close_btn2.onclick = popup.close;
  this.close_btn3.onclick = popup.close;
}
 
let pop = new Modal();
document.querySelector('.m_btn_1').onclick = function(e){
  pop.open();
  e.preventDefault();
}
 
let pop2 = new Modal();
  document.querySelector('.m_btn_2').onclick = function(e){
  pop2.open2();
  e.preventDefault();
}

Собственно вопрос, на сколько я криво его доработал и можно ли как то укоротить? Сложность в том, что если окон дофига будет, то портянка ещё та получится + бывает к примеру 5 кнопок, что бы открыть одну и ту же модалку ну и чуть меньше, несколько, что бы закрыть одну и ту же.
И на каждую писать типа такой комбинации

JavaScript
1
2
this.close_btn3 = document.querySelector('.ma_close');
this.close_btn3.onclick = popup.close;

В общем нужна оптимизация для нескольких окон и нескольких кнопок, для одного и того же окна.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<!-- modals -->
 
<div class="overlay"></div>
 
<div class="modal m_login">
  <span class="close_btn"></span>
</div>
 
<div class="modal m_application">
  <span class="close_btn cb2"></span>
</div>
<!-- end of modals -->

@Segera · 09.12.2024, 13:23

была задача с несколькими окнами popup.
Причем, с масштабированием до любого количества.
1. Use Bootstrap’s JavaScript modal plugin
2. JQuery здесь просто в поисковую строку что надо и ответ почти готов. Разумеется с допиливанием. Ну а куда без него
3. ванильном CSS. Или так говорят про JS? Но не суть. Здесь главное использовать линк + идентификатор <a href="#....">. Которые можно множить по любому требованию.
Понятно, используя JS будет много чего в дополнение. Если оно требуется.
Простое модальное окно на CSS без JS - правое окно просмотра лучше расширить, т.к. не сделано адаптивные штучки.

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Простое модальное окно на CSS</title>
        <!---
          https://codepen.io/vavik96/pen/VPOVKe
           <script src="js/ModalWindow30.js"></script>      
                        -->
<link rel="stylesheet" href="styles.css">      
<link rel="stylesheet" href="modal.css">
<link rel="stylesheet" href="pictr_move.css">                   
</head>
<body>
    <h1>Простое модальное окно на CSS без JS</h1>
 
            <!-- cсылка на модальное окно -->
 <a href="#ModalOpenK" title="">Открыть окно КИА</a>
 <!-- само модальное окно -->
  <div id="ModalOpenK" class="Window">
            <div>
  <a href="#close" title="Закрыть" class="close">X</a>
  <p>Kia Optima<br>Представляет собой седан с кузовом-купе от южнокорейского автопроизводителя Kia, ориентированный на средний класс. Модельный ряд основан на той же платформе, что и Hyundai Sonata, и является преемником модели Kia Clarus.</p>
  <img src="https://a.d-cd.net/1b2d45es-1920.jpg" height="650" alt="KiaOptima" /> 
            </div>
  </div> 
  <br>
  <a href="#ModalOpenL" title="">Открыть окно Лада</a>
   <!-- само модальное окно -->
  <div id="ModalOpenL" class="Window">
    <div>
<a href="#close" title="Закрыть" class="close">X</a>
<p>Лада Веста<br>LADA Vesta седан вместителен и удобен, особое внимание уделено акустическому комфорту. Седан отлично приспособлена для сложных климатических и дорожных условий. ... Новая LADA Vesta седан. Поколение, которое всё меняет. от 1 239 900 ₽.</p>
<img src="https://kolesa-uploads.ru/-/f28d5ec3-2443-4e49-90b2-a51d6a0c15de/f82a25d649000ddc88347361aa5daf82.jpg" height="650" alt="Lada" /> 
    </div>
</div> 
  <br>
<a href="#ModalOpenJ" title="">Открыть окно  Geely Tugella</a>
 <!-- само модальное окно -->
<div id="ModalOpenJ" class="Window">
  <div>
<a href="#close" title="Закрыть" class="close">X</a>
<p>Geely Tugella<br>Geely Tugella в комплектации Flagship — в новом кузове цена составляет 3 899 990 - 4 329 990 рублей. Кроссовер мощностью 238 л.с.</p>
<img src="https://a.d-cd.net/K1mZr3RTr1NjR9kIq0sbuWJ97gM-960.jpg" /> 
  </div>
</div> 
  <!--  width="2400" height="450" alt="Geely Tugella" width="300"  width="300"-->
 
        </body>
</html>

styles.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/* Начало стилей  */
img {
  width: 50rem;
  display:block;
  margin:auto;
}
.Window {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.7);
  z-index: 99999;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  display: none;
  pointer-events: none;
 }
 
 .Window:target {
  display: block;
  pointer-events: auto;
 }
 
 .Window > div {
  width: 80%;
  height: 100%;
  bottom: 100px;
  position: relative;
  margin: 10% auto;
  padding: 20px;
  border-radius: 5px;
  background: #e3eb7d;
  box-shadow: 0px 0px 20px 2px;
 }
 
 .close {
  background: #cc3300;
  color: #e3fc09;
  line-height: 21px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 27px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 15px;    
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
 }
 .close:hover { background: #990000; }
 /* Окончание стилей */

modal.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/* Создано средствами разработчика F12 Ie10. Это может не быть точным представлением файла исходного источника */
body {
    font-family: Times New Roman,Arial,Helvetica,Sans-Serif;
    font-size: 15pt;
    background-color: rgb(240, 230, 140);}
h1{
    color:rgb(1, 1, 124);
    text-align: center;
 
    }
h2{
    color:darkseagreen;
    text-align: right;
    }
h3{   font-size: 30px;   color:darkgreen;   }   /**/
img{align:"center"}
h1 {text-decoration: none}
h1 {
    background: linear-gradient(to right, transparent, transparent),
    linear-gradient(to right, #ff0000, #fff200, #1e9600);
    background-size: 100% 3px, 0 3px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 400ms;
}
a {
    /* float: right; */
    display: block;
    text-align: right;
}
p{
    font-family:Times New Roman;
    font-size:23px;
    background-color:#CCCCCC;
    color:#330099;
    background-position:center;
    text-align:center;
    border: 3px;
    border-bottom-style:solid;
    text-decoration: blink;/**/
}
 
h1:hover {
         background-size: 0 11px, 100% 11px;
    }
 
 
.dropdown-content a:hover {background-color: #e4f312}
 
.dropdown:hover .dropdown-content {
    display: block;
}
 
.dropdown:hover .dropbtn {
    background-color: #a4e639;
} 
.neon-textABlok {
    text-align: right;
    color: #0f0;
   text-shadow: 7px 7px 3px #2400ff,
                         -7px -7px 70px #7e2bd9;
                -webkit-text-stroke:  2px #fc78ff;
                -webkit-text-fill-color: transparent;
                letter-spacing: 5px;  /**/
                }
 
.neon-textAcam{
                text-align: left;
                font-family: sans-serif;
   font-size: 50px;
   color: #fff;
  text-shadow:
        0 0 7px #000,
        0 0 10px #000,
        0 0 21px #0f0,
        0 0 42px #0f0,
        0 0 82px #0fa,
        0 0 92px #0fa,
        0 0 102px #0fa,
        0 0 121px #0fa,
        0 0 151px #0fa,
        0 0 171px #0fa;
                }
                .container {
                    height: 1200px;
                }
 
                ::-webkit-scrollbar {
                    width: 21px;
                }
 
                ::-webkit-scrollbar-track {
                    background: #00ee34;
                    box-shadow: 0 0 2px rgba(34, 63, 0, 0.2) inset;
                }
 
                ::-webkit-scrollbar-thumb {
                    background: #a0b4df;
                    border-radius: 8px;
                    border: 3px solid #c3ee04;
                }
 
                ::-webkit-scrollbar-thumb:hover {
                    background: #2d0192;
                }

pictr_move.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* https://projects.verou.me/css3patterns/# 
https://developer.mozilla.org/ru/docs/Web/CSS/CSS_images/Using_CSS_gradients
*/
 
img {
position: absolute;
top: 20%; /*  по центру */
left: 20%;
animation-fill-mode: forwards;
animation-play-state: running;
animation-duration: 3s;
animation-name: slidein;
 
}
 
@keyframes slidein {
from {
  margin-left: 100%;
  width: 300%;
}
 
75% {
  margin-left: 15%;
  width: 250%;
}
 
to {
  margin-left: -18%;
  width: 50em;
}
}
 
body {
 height:100svh;
  background: conic-gradient(rgba(0,238,255,1) 19%, blue); 
}
 
/*  */
 
.title_modal {
  color:rgb(1, 1, 90); 
  font-size: 34px;
  position: absolute;
  right: 40%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
 
}
 
.simple-linear {
  height:100svh;
  background: conic-gradient(rgba(0,238,255,1) 19%, blue); 
}

Понятно в более чем, можно сделать по-другому, а где-то уже сделал ( это было весна-лето прошлого года ). Также удалить излишества. Идея была включить ещё больше.

@Mailo · 09.12.2024, 13:40 **[ТС]**

Сообщение от Segera

Здесь главное использовать линк + идентификатор <a href="https://www.cyberforum.ru/javascript/#....">

Вот последний заказчик-бэкендер такой способ и за айдишники ругал и за тег a, который по факту никуда не ведёт, мол если он никуда не ведёт то и не надо его юзать, а по мне так удобно, вдруг надо быстро popup на линк поменять, а preventDefault не сложно дописать.

@gogolik · 09.12.2024, 14:25

Сообщение от Mailo

Вот последний заказчик-бэкендер такой способ и за айдишники ругал и за тег a, который по факту никуда не ведёт

Всё правильно делал. Это плохой подход.

@Segera · 09.12.2024, 14:33

Сообщение от gogolik

Это плохой подход.

это весь довод?
Если линк ведет в пределы самого проекта, в чем проблема?

@gogolik · 09.12.2024, 15:05

Segera, якорные ссылки должны вести на разделы сайта, а не на модалки. Они для этого и созданы. Вы же не забиваете гвозди микроскопом?
Всю логику модальных окон можно построить на дата-аттрибутах. И тогда не нужно никаких извращений с preventDefault.

Минимальный пример из реальных проектов:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const modalTogglers = document.querySelectorAll('[data-modal]')
if (modalTogglers) {
    modalTogglers.forEach(el => {
        el.addEventListener('click', () => {
            const modalID = el.dataset?.modal
            if (!modalID) return
 
            toggleModal(modalID)
        })
    })
}
 
const toggleModal = id => {
    const modal = document.getElementById(id)
    if (modal) {
        modal.classList.toggle('opened')
    }
}

@Segera · 09.12.2024, 16:01

Сообщение от gogolik

Всю логику модальных окон можно построить на дата-аттрибутах.

если использовать JS, логичнее использовать фреймворки. Об этом п.п. 1, 2. А не создавать индустрию велосипедостроения.
Впрочем, может быть исключение. Если это хорошо оплачивается, почему нет.
ПС. Потом что значит должны? Это есть в правилах ECMA или других.

@gogolik · 09.12.2024, 16:28

Сообщение от Segera

Это есть в правилах ECMA или других.

Приведите конкретную цитату. В частности, из ECMA, который вы упоминаете.

Я уже молчу про то, что ссылка - это ссылка, а не элемент управления UI.

Сообщение от Segera

логичнее использовать фреймворки.

Не логичнее. Зачем мне тащить несколько сот килобайт того же бутстрапа ради модалок, если я могу то же самое написать в 200-300 строчек с учётом всех анимаций и стилей?

@voraa · 09.12.2024, 16:50

Сообщение от Segera

ПС. Потом что значит должны? Это есть в правилах ECMA или других.

Ну сейчас тенденция, что следует использовать элементы html в соответствии с их семантикой. Это связано в первую очередь с использованием программ доступности (экранные читалки, работа исключительно с клавиатуры, а не мышью...) На загнивающем западе, если какой то достаточно значимый сайт (магазин, покупка билетов, правовая информация...) не является доступным для лиц с ограниченными возможностями, то его могут крупно оштрафовать.
Программы чтения с экрана тоже ориентируются на семантический смысл элементов. Для них <a> это переход на другую страницу или другой раздел, а не выполнение какого то действия. Для действий (открыть окно, закрыть окно, послать запрос..) есть <button>, а не <a> или какой то другой кликабельный <div>.
(<div> в принципе тоже можно, задав ему role="button", но при этом надо обеспечить ему фокусировку, что бы на него можно было попасть при работе с клавиатуры, а с <button> это обеспечивается автоматически)

Добавлено через 20 минут
Для простых popup окон (не модальных) можно рассмотреть использование атрибута popover.
https://developer.mozilla.org/... opover_API
Правда, к сожалению, на старых Сафари это не работает.
(По мне, так обновляться надо)

@Segera · 09.12.2024, 17:58

Сообщение от gogolik

Приведите конкретную цитату. В частности, из ECMA, который вы упоминаете.

у меня было про это:

Сообщение от gogolik

якорные ссылки должны вести на разделы сайта, а не на модалки.

это не совсем какие-то придирки к словам. Интересно, откуда это про "должны". Поэтому, единственно что сразу вспомнилось правила ECMA.

Сообщение от gogolik

Зачем мне тащить несколько сот килобайт того же бутстрапа ради модалок

зачем тащить, если можно привести линк на ресурс? Впрочем, конечно можно скачать jq.js и вставить в свой бекэнд. В этом случае будет вариант тащить. Бывают ситуации, когда сеть закрыта и это единственный вариант. Едва ли это имелось ввиду.

Как тут всё кошерно. Если сказал HTML, значит не фейшуйно использовать линк кроме перехода на другую страницу.
Как быть тогда, если в CSS забрали анимацию, плавное выход из любой части экрана и т.д., которые раньше работали исключительно из JS. Вроде как не того сорта инструмент.

voraa
макось для нас не так актуальна.
Можно предложить ТС масштабированный вариант https://mdn.github.io/dom-exam... le-manual/

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Multiple manual popovers example</title>
    <style>
      :popover-open {
        position: absolute;
        inset: unset;
        top: 80px;
      }
 
      #mypopup-1 {
        left: 8px;
      }
 
      #mypopup-2 {
        left: 150px;
      }
    </style>
  </head>
  <body>
    <button popovertarget="mypopup-1" popovertargetaction="show">
      Show popover #1
    </button>
    <button popovertarget="mypopup-1" popovertargetaction="hide">
      Hide popover #1
    </button>
    <hr>
    <button popovertarget="mypopup-2" popovertargetaction="show">
      Show popover #2
    </button>
    <button popovertarget="mypopup-2" popovertargetaction="hide">
      Hide popover #2
    </button>
 
    <div id="mypopup-1" popover="manual">Popover content #1</div>
    <div id="mypopup-2" popover="manual">Popover content #2</div>
  </body>
</html>

Вообще-то, ещё раз уточню. Не против выполнения простых задач сложным путём. Ну или в чем-то сложнее, представленных в п.3. Это может добавить веса проекту и соответственно профиту. От чего мало кто откажется.

@barabar · 09.12.2024, 18:16

Сообщение от Segera

зачем тащить, если можно привести линк на ресурс?

Вероятно, кто-то не в курсе, как тормозят загрузку страницы сторонние ресурсы.

@voraa · 09.12.2024, 19:12

Сообщение от Segera

значит не фейшуйно использовать линк кроме перехода на другую страницу.

Или на другую часть документа (по якорю). В любом случае при переходи меняется текущий url, и можно вернуться назад кнопкой Back.

@Segera · 09.12.2024, 19:43

Сообщение от barabar

Вероятно, кто-то не в курсе, как тормозят загрузку страницы сторонние ресурсы.

похоже, кто ещё больше не курсе, как они тормозят на бекэнде. Если конечно этот вопрос для кого-то хоть как-то актуален.

Сообщение от voraa

В любом случае при переходи меняется текущий url, и можно вернуться назад кнопкой Back.

ну это, если очень надо. Например, даже на cyberforum.ru нет стрелки вернуться назад при количестве страниц более одной.
Неужели эта главная особенность ( фишка ) линка <a target="_blank" href="1.html"></a>
Если вы таких строгих правил, какое отношение допустим к кнопке в линке?

HTML5
1
2
3
 <a target="_blank" href="https://ya.ru">
                  <button>Поиск</button>
                  </a>

@barabar · 09.12.2024, 19:50

Сообщение от Segera

похоже, кто ещё больше не курсе, как они тормозят на бекэнде. Если конечно этот вопрос для кого-то хоть как-то актуален.

Мне, как владельцу сайта, этот вопрос очень актуален и нет никакой разницы, где именно они тормозят. Важно, что тормозят. Даже то, что браузер после первого посещения всё закэширует и потом тормозов не будет, ни как не влияет на сервис гугла Lighthouse. Отправит сайт в красную зону и Гугл выдачу сайта в поиске понизит.

@voraa · 09.12.2024, 19:50

Сообщение от Segera

Если вы таких строгих правил, какое отношение допустим к кнопке в линке?

Так просто делать нельзя!!!

Content model:
Transparent, but there must be no interactive content descendant, a element descendant, or descendant with the tabindex attribute specified.

https://html.spec.whatwg.org/m... -a-element

Разрешённый контент Логический контент, содержащий либо основной поток (исключая интерактивный контент), либо заголовочный контент.

https://developer.mozilla.org/... /Element/a

@gogolik · 09.12.2024, 20:15

Сообщение от Segera

Интересно, откуда это про "должны".

И вы решили не имея ни малейшего понятия о ECMA приплести его?

Я уже сказал, что как минимум ссылки - это не элемент управления UI.

Сообщение от Segera

можно скачать jq.js и вставить в свой бекэнд

Зачем бэкенду jquery? Опять оперируем понятиями, не имея представления о них?
Зачем вообще эта срань любому современному сайту?

Сообщение от Segera

Если сказал HTML, значит не фейшуйно использовать линк кроме перехода на другую страницу.

Смотрим в стандарт. Цитирую:

If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents.

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant, consisting of just the element's contents.

Из этого определения следует, что назначение <a> - быть гиперссылкой. Для действий, не связанных с переходами по ссылкам (например, открытия модальных окон), спецификация рекомендует использовать другие элементы, что, соответственно, подразумевает нежелательность превращать <a> в "кнопку действия" с точки зрения семантики и практики.

Сообщение от Segera

Как быть тогда, если в CSS забрали анимацию, плавное выход из любой части экрана и т.д., которые раньше работали исключительно из JS. Вроде как не того сорта инструмент.

Этот поток мыслей не понял, сорян.

@Segera · 10.12.2024, 07:14

Сообщение от voraa

Так просто делать нельзя!!!

понимаю, чем-то всё это напоминает сцену из спектакля Полунина, с понятным названием что можно. В противоположном смысле.
по вашему разъяснению цитата <a> - элемент ссылки

Также он может быть использован (в устаревшем варианте) для создания якоря — это место назначения для гиперссылок внутри страницы: так ссылки не ограничены только в перемещении между страницами.

Т.е. претензия из-за использования чего-то устаревшего от этого года или если точнее This page was last modified on 11 авг. 2024 г.
При этом не надо смущаться другими устаревшими name, shape.
У меня есть одно предубеждение. Это не работает. Если всё работает и простыми методами, предубеждение = 0. Разумеется, отлично понимаю, мнение редакции может не совпадать с мнениями корреспондентов.
Какой тут может быть резюм? Большинстве в теме не будет использовать линк+#(якорь) и крайне негативно относятся, если используют другие. Ну бывает такое. Не фейшуйно. Общество не одобряет.
Если мой заказчик будет того же мнения, разумеется сделаю нужные правки. Пока гуру не мои заказчики, поэтому могу известить, принял к сведению.
Надеюсь, gogolik хотя бы эту простую мысль не определил как поток, а значит понял.

@voraa · 10.12.2024, 07:44

Сообщение от Segera

Большинстве в теме не будет использовать линк+#(якорь) и крайне негативно относятся, если используют другие.

Я только не пойму, с чего вы это взяли. Якорь нормальная вещь (Раньше через <a> вводилась, теперь через id можно), Перемещение к якорю с помощью ссылки - тоже нормально.
Где вы увидели, что кто то что то сказал против якорей.

@gogolik · 10.12.2024, 08:06

Segera, по делу ответить нечего? Или используем ваш классический "уход в тень" после того, как тотально и жидко облажались? Какой-то якорь приплели, каких-то заказчиков, какое-то одобрение общества. Вместо очередного потока сознания могли бы и на мои вполне логичные вопросы ответить.

@Segera · 10.12.2024, 08:50

Сообщение от voraa

Где вы увидели, что кто то что то сказал против якорей.

именно была в этом уверенность. Как минимум с год. С каких пор вполне удовлетворительно работает, без намека на претензии, так незя.
Откуда?

Сообщение от gogolik

Это плохой подход.

Сообщение от gogolik

якорные ссылки должны вести на разделы сайта, а не на модалки.

вот эту фразу долго мусолил, но оставил на что-то в раздел мне-так-кажется. На раздел сайта или наверное точнее страницы ведет линк с адресом XXX.html, включая пути конечно. Но как может вести куда-то <a href="#ID">, кроме к индентификатору? Или тут надо понимать, если линк, то либо на другой ресурс, либо якорь, но идентификатор ни-ни.
В чем отличие идентификатора от линка? Наверное в узости и ограниченности применения. До понятия якорь, где ограничение больше некуда.
Но ещё раз уважаемые гуру и господа. Или в другом порядке. Всё определяет заказчик. Или тот, у кого это работает.
Где есть один факт. Работает ( хорошо или не очень ) или не работает. По-моему работает без единого вопроса.
В чем может выявиться проблема использования в линке идентификатора? Можно предположить у кого-то диссонанс в виде "А что так можно?!!!" Если начнет читать чужой код. Случай более чем распространенный. Ну или если всем нельзя, значит тут нет шансов.
Малая надежда, не просматриваются любые потоки, чтобы что-то было не понятно.

@gogolik · 10.12.2024, 09:28

Сообщение от Segera

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

В вашей некомпетентности и незнании простейших понятий. Ну и нежелании пройти по ссылке и прочитать стандарт.

И опять куча пустых слов в сообщении, вместо ответа. Дальнейшие ваши комментарии буду рассматривать как намеренное введение других пользователей в заблуждение. Лучше не говорить ничего, если не разбираешься в сабже.

Новые блоги и статьи Все статьи Все блоги /
Часы с термометром и праздничным календарем yariko 12.11.2026 Сегодня мы рассмотрим как можно сделать отличные многофункциональные часы. Итак, поставим конкретную задачу: разработать часы с календарем, двумя термодатчиками, выводом поздравительных сообщений. . .	Транслитерация текста с кириллицы на латиницу (вариант №1) Maks 11.11.2026 Решил облегчить жизнь себе и коллегам админам при создании электронных почтовых ящиков для пользователей, в результате написал обработку "Транслитерация текста" с кириллицы на латиницу, а в ней. . .	Книги по геймдизайну, левел-дизайну, игровым механикам и проектированию игрового опыта 8Observer8 08.11.2026 Содержание блога \| English Version 1. 2003 - 06 - Designing Virtual Worlds (1st Edition) Автор: Richard A. Bartle \| Объем: 768 стр. Ссылки: Amazon . . .	Родители токсичные абьюзеры по отношению к своим детям ругают их оскорбляют не любят zorxor 08.11.2026 Жить в атмосфере постоянных оскорблений, критики и холодности со стороны родителей — это тяжелое и болезненное испытание, которое оставляет глубокие эмоциональные раны. Токсичное и абьюзивное. . .
Как только я захожу к себе в свою комнату я сразу же с себя снимаю свои трусы. Ответ от Джемени ИИ. zorxor 08.11.2026 Джемени, как только я захожу к себе в свою комнату я сразу же с себя снимаю свои трусы. Многие люди, возвращаясь домой, сразу переодеваются в максимально свободную одежду или вовсе предпочитают. . .	Паттерн очереди действий/команд (Action / Command Queue). Система очереди действий и кат-сцен с SDL3 Callbacks, cglm и OpenGL 8Observer8 07.11.2026 Содержание блога \| English Version Руководство для начинающих по реализации паттерна очереди действий/ команд (Action / Command Queue) на C++ (C++20) с использованием официального SDL3 Callbacks. . .	Проверка полного ФИО в типовом справочнике Maks 07.11.2026 Решение реализовано в конфигурации КА2, на примере справочника "КонтактныеЛицаПартнеров". Задача: Запрет инициалов. Не допускаеть использование сокращений вида "И. И. ", "И. И. ", "И И" и. . .	Про "Windows must die!" kumehtar 04.11.2026 Знаете, чет накатило. . . . Когда-то это было почти боевым кличем: мол, нормальный человек сидит на DOS, OS/ 2 или Linux, а вот это вот - Must Die. А теперь человек произносит «мастдай» с усмешкой - и. . .

@gogolik Супер-модератор 4000 / 2174 / 833 Регистрация: 13.03.2010 Сообщений: 7,074
	10.12.2024, 08:06
	Segera, по делу ответить нечего? Или используем ваш классический "уход в тень" после того, как тотально и жидко облажались? Какой-то якорь приплели, каких-то заказчиков, какое-то одобрение общества. Вместо очередного потока сознания могли бы и на мои вполне логичные вопросы ответить. 0