Is there a way to implement an onclick event on a specific line of text that triggers a popup box only when the text is clicked, without the popup appearing automatically when

Question

Is there a way to implement an onclick event on a specific line of text that triggers a popup box only when the text is clicked, without the popup appearing automatically when

I received assistance from a fellow user to customize a popup that turned out great. However, I'm having trouble getting the onclick function to work properly so that the popup only appears when the phone number is clicked. Ideally, I want the phone number to be displayed first, and when clicked, a popup should appear asking the user whether they want to "Call or Text?" This way, the user can choose between calling or texting. Appreciate any help!

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>

javascript html css onclick

Answer 1

Answer №1

Behold, the function you seek:

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

Take a look at this code snippet:

var modal = document.getElementById('activateModal');
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('activateModal');
var span = document.getElementById("close");

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

function activateModal() {
    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="activateModal()">555-5555</p>
<div id="activateModal" 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>

Answer 2

Behold, the function you seek:

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

Take a look at this code snippet:

var modal = document.getElementById('activateModal');
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('activateModal');
var span = document.getElementById("close");

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

function activateModal() {
    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="activateModal()">555-5555</p>
<div id="activateModal" 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>

Answer 3

Answer №2

To begin, you must initially set the display:'none' property to your modal. Create an onclick function for your elements and use it to either show or hide your modal like this.

EXAMPLE

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

function openDialog(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="openDialog(this)">555-5555</p>
<div id="textCall" class="dialogue">
  <div class="modal-content">
    <span onclick="closeDialog(this)" id="close">&times;</span>
    <h2>Call or Text?</h2>
    <a href="tel:15555555555">Call</a>
    <a href="sms:15555555555">Text</a>
  </div>
</div>

Answer 4

To begin, you must initially set the display:'none' property to your modal. Create an onclick function for your elements and use it to either show or hide your modal like this.

EXAMPLE

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

function openDialog(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="openDialog(this)">555-5555</p>
<div id="textCall" class="dialogue">
  <div class="modal-content">
    <span onclick="closeDialog(this)" id="close">&times;</span>
    <h2>Call or Text?</h2>
    <a href="tel:15555555555">Call</a>
    <a href="sms:15555555555">Text</a>
  </div>
</div>

Is there a way to implement an onclick event on a specific line of text that triggers a popup box only when the text is clicked, without the popup appearing automatically when

Answer №1

Answer №2

Similar questions

Identify the activation of the "Inspect Element" feature

The collapsible tree nodes overlap one another in the D3.js visualization

Utilizing Tailwind CSS for creating a responsive layout on a Next.js application

"Encountering a Type Error while attempting to destructure elements within ReactJS

Having trouble getting a resizable DIV inside a 100% height DIV with margin to work properly. Any tips or assistance would be greatly

Customize the appearance of semantic-ui-react components with hover effects

Unable to execute multiple instances of Selenium PhantomJS concurrently

Synchronous execution of functions in Node.js

The function was not invoked as expected and instead returned an error stating "this.method is not

Trigger a function when clicking outside the element, similar to how a Bootstrap modal is closed

Executing a function after an AngularJS directive's reference function has been called

How can I display a Skeleton when pressing pagination buttons and then turn it off after 3 seconds?

Drawing unusual shapes using canvas arcs in Coffeescript

CSS Table columns are set to have a fixed width for the first and last columns, while the middle two columns have dynamic widths

Using TinyMCE editor to handle postbacks on an ASP.NET page

Include a stylesheet as a prop when rendering a functional component

Is there a way in AngularJS utilizing ui-router to retrieve the ngResource error from $stateChangeError when a request fails in the resolve section of a state?

Ways to retrieve the output parameter in the node mssql

When a form added by jQuery is submitted, the associated JavaScript does not run as expected

The CSS transition timing seems to be malfunctioning as not all elements are smoothly transitioning, specifically the text within the li and anchor tags is not