如何將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>