如何将onclick添加到一行文本中，以便仅在单击时而不在页面加载时才调用弹出框？

Question

多亏了另一个用户的帮助，我才能自定义一个看起来不错的弹出窗口，但是我无法完全使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>

Answer 1

该功能是您要寻找的：

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> 

Answer 2

为此，您需要首先将display:'none'为模态。 您可以为元素创建onclick函数，并像这样show或hide模态。

DEMO

 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>