如何在JavaScript alert弹窗的消息中添加可点击链接？

你遇到的核心问题是原生alert()函数只支持纯文本内容，它不会解析HTML代码——所以你用str.link()生成的<a>标签只会以字符串形式显示，没法变成可点击的链接。

要实现带可点击链接的提示窗口，我们需要用**自定义模态框（Modal）**来替代原生alert，因为自定义弹窗可以完全控制内部的HTML内容。下面是改造后的完整代码：

<!DOCTYPE html> 
<html> 
<base target="_top"> 
<head>
    <style>
        /* 自定义模态框基础样式 */
        .modal {
            display: none; /* 默认隐藏 */
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5); /* 半透明遮罩 */
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background-color: white;
            padding: 24px;
            border-radius: 8px;
            text-align: center;
            width: 320px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.15);
        }
        .modal-content a {
            color: #007bff;
            text-decoration: none;
            font-weight: 500;
        }
        .modal-content a:hover {
            text-decoration: underline;
        }
        .close-modal {
            margin-top: 20px;
            padding: 8px 18px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .close-modal:hover {
            background-color: #0056b3;
        }
    </style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
<script type="text/javascript"> 
function myfunction(from){ 
    (function($){ 
        var id = $("#id").val();
        var wnum = $("#wnum").val();
        if(from == 'submit'){ 
            submitData(id,wnum); // 假设此函数已实现数据提交逻辑
            // 显示自定义模态框
            const modal = document.getElementById('custom-modal');
            modal.style.display = 'flex';
            
            // 关闭按钮逻辑
            document.querySelector('.close-modal').onclick = function() {
                modal.style.display = 'none';
            }
            // 点击遮罩层关闭模态框
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = 'none';
                }
            }
        } 
    })(jQuery); 
}

// 模拟submitData函数（若你已有实际实现可删除此段）
function submitData(id, wnum) {
    console.log('已提交数据：订单ID=' + id + '，WhatsApp号码=' + wnum);
}
</script> 
</head>
<body> 
<div class="cen"> 
<div class="wrapper"> 
<h1>Font Selector</h1> 
<fieldset class="fontForm grid"> 
<div class="grid-cell"> 
<div class="grid-cell size1of1"> 
<label for="fname">Order Id</label> 
<input type="text" id="id" name="id" placeholder="Enter order id" > 
<label for="fname">WhatsApp Number</label> 
<input type="text" id="wnum" name="wnum" placeholder="Enter WhatsApp number"> 
<p><button onclick="myfunction('submit')">Submit</button></p> 
</div> 
</div>
</fieldset>
</div>
</div>

<!-- 自定义模态框结构 -->
<div id="custom-modal" class="modal">
    <div class="modal-content">
        <p>Thank you for submitting the form.</p>
        <p><a href="some_link" target="_blank">Inform us!</a></p>
        <button class="close-modal">Close</button>
    </div>
</div>
</body> 
</html>

关键改动说明： #

1. 新增模态框样式：实现了半透明遮罩和居中弹窗，兼顾美观与交互体验，你可以根据需求调整颜色、尺寸等样式。
2. 替换alert为自定义模态框：数据提交完成后，通过JS控制模态框的显示/隐藏，弹窗内直接嵌入可点击的<a>标签，支持所有HTML特性。
3. 优化jQuery取值逻辑：用.val()替代原生[0]['value']写法，代码更简洁易读。
4. 添加关闭交互：支持点击按钮或遮罩层关闭弹窗，符合用户操作习惯。

这样提交表单后，就能弹出带有可点击链接的提示窗口了，整体体验比原生alert更友好。

内容的提问来源于stack exchange，提问作者ABCD