Как добавить onclick в строку текста, чтобы всплывающее окно вызывалось только при нажатии, а не при загрузке страницы?

Благодаря помощи другого пользователя я смог настроить всплывающее окно, которое выглядит великолепно, но я не могу заставить работать onclick, чтобы всплывающее окно не отображалось до тех пор, пока не будет щелкнуть номер телефона. Я хотел бы показать номер телефона отдельно, и после нажатия появится всплывающее окно, которое спросит пользователя: «Позвонить или текст?», А затем пользователь нажимает кнопку по своему выбору. Спасибо!

var modal = document.getElementById('textCall');
var span = document.getElementById("close");
modal.style.display = "block";
span.onclick = function(){
modal.style.display = "none";
}

CSS

.dialogue {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 150px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

#close, #closed {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#close:hover,
#close:focus,
#closed:focus,
#closed:hover {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
}

#textCall {
  display: block;
}

HTML

<p onclick = "textCall">555-5555</p>
<div id = "textCall" class = "dialogue">
    <div class = "modal-content">
        <span id = "close">&times;</span>
        <h2>Call or Text?</h2>
        <a href = "tel:15555555555">Call</a>
        <a href = "sms:15555555555">Text</a>
    </div>
</div>
</div>

рабочий пример

— 12.04.2018 19:34

javascript html css onclick

12.04.2018 19:24

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 2

Эта функция - то, что вы ищете:

function textCall(e) {
    modal.style.display = "block";
}

Проверьте фрагмент:

var modal = document.getElementById('textCall');
var span = document.getElementById("close");
var number = document.getElementById("number");

number.onclick = function() {
    modal.style.display = "block";
};
span.onclick = function() {
    modal.style.display = "none";
};

var modal = document.getElementById('textCall');
var span = document.getElementById("close");

span.onclick = function() {
    modal.style.display = "none";
};

function textCall(e) {
    modal.style.display = "block";
}

.dialogue {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 150px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

#number {
  cursor: pointer;
}

#close, #closed {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#close:hover,
#close:focus,
#closed:focus,
#closed:hover {
    color: #000000;
    text-decoration: none;
    cursor: pointer;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 40%;
}

<p id = "number" onclick = "textCall()">555-5555</p>
<div id = "textCall" class = "dialogue">
    <div class = "modal-content">
        <span id = "close">&times;</span>
        <h2>Call or Text?</h2>
        <a href = "tel:15555555555">Call</a>
        <a href = "sms:15555555555">Text</a>
    </div>
</div>

Это отлично работает для onclick, но он все еще загружает всплывающее окно при загрузке страницы. Есть ли способ, чтобы всплывающее окно не загружалось, пока не будет нажата цифра? Большое спасибо за Вашу помощь!

— 12.04.2018 21:15

@SweetBabyJames Я отредактировал вопрос, чтобы он работал так, как вы ожидали. Попробуйте, пожалуйста.

— 12.04.2018 21:20

Спасибо за помощь. Всплывающее окно не запускалось при загрузке страницы, но теперь всплывающее окно исчезает при нажатии.

— 12.04.2018 21:59

12.04.2018 19:33

Для этого вам необходимо изначально установить display:'none' в модальное окно. Вы можете сделать onclick функцией для своих элементов и сделать show или hide своим модальным окном вот так.

ДЕМО

function closeModal(e) {
  document.getElementById('textCall').style.display = "none";
}

function textCall(e) {
  document.getElementById('textCall').style.display = "block";
}

.dialogue {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.number {
  cursor: pointer;
}

#close,
#closed {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

#close:hover,
#close:focus,
#closed:focus,
#closed:hover {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 40%;
  position: fixed;
  top: 25%;
  left: 25%
}

<p class = "number" onclick = "textCall(this)">555-5555</p>
<div id = "textCall" class = "dialogue">
  <div class = "modal-content">
    <span onclick = "closeModal(this)" id = "close">&times;</span>
    <h2>Call or Text?</h2>
    <a href = "tel:15555555555">Call</a>
    <a href = "sms:15555555555">Text</a>
  </div>
</div>

12.04.2018 21:24

Другие вопросы по теме

События щелчка не работают должным образом в Angular 5

Как мне создать панель навигации, которая позволяет вводить элементы, такие как текстовые поля и кнопки, только с HTML и CSS?

Определение разных BrowserWindows в электронном основном файле, но работает только одна из них?

Bootstrap 4 - Вертикальное выравнивание

Шрифт рендеринга HTML-объекта IE11 не унаследован?

Сравнение ввода формы и значения диапазона для функции клавиатуры

JavaScript добавляет событие onclick к элементу

Flex-flow: перенос столбца не растягивает ширину родительского элемента

Как достигается позиционирование текста / элементов на этом сайте

Ставим 3 элемента в ряд, не должны ломаться при изменении размера

Как добавить onclick в строку текста, чтобы всплывающее окно вызывалось только при нажатии, а не при загрузке страницы?

Ответы 2

Другие вопросы по теме

Похожие вопросы