Как сделать, чтобы в модальном окне можно было выделять мышкой и оно не закрывалось от одного клика?

Question

[Ivan Gant]

https://codepen.io/designcouch/pen/obvKxm

Cложность вопроса не знаю.

Answer 1

[Владимир]

Вот этот кусок отвечает за закрытие по клику на окне

$('#modal-container').click(function(){
  $(this).addClass('out');
  $('body').removeClass('modal-active');
});

Если просто его убрать, то сможешь выделять но не сможешь закрыть, перепиши на свое по вкусу

Плюс вот это кусок непонятно зачем, помоему он как раз и затеняет модалку чтобы выделять через задницу можно было только

<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
								<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
							</svg>

Comments

[Антон]

Капитан очевидность

[Владимир]

Антон, Ну какой вопрос, такой и ответ. За готовыми решениями на фриланс можно.

[Ivan Gant]

а как сделать, чтобы выделять мышкой можно было?

[xonar]

Ivan Gant, Модальному окну можно добавить крестик в углу и навесить событие на него или на задний фон. Так будет правильнее.

[Владимир]

Ivan Gant, У меня выделение на модалке работало без проблем в вашей песочнице, после того как убрал код, который закрывает.

[Владимир]

Ivan Gant, Плюс вот это кусок непонятно зачем

<svg class="modal-svg" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" preserveAspectRatio="none">
								<rect x="0" y="0" fill="none" width="226" height="162" rx="3" ry="3"></rect>
							</svg>

По мне он просто перекрывает модалку чтобы затруднить выделение и копирование

Answer 2

[Антон Усачев]

Comments

[Ivan Gant]

разобрался. спасибо, вы просто красавец.

[Антон Усачев]

Я поправил кодпен, который ты выложил. Там все исходники.)