JS 彈窗

本文介绍JavaScript中window.alert()函数的基本用法,展示了如何通过按钮触发警告框提示信息,适用于前端开发初学者。

不是window.open(開啟一個新視窗) ,
這裡主要是 window.alert(警示) 的簡易使用紀錄~

alert 應用於”做完X事結束”時的提醒,可以讓讀者知道這個訊息,
但若不關閉該視窗,則無法繼續瀏覽

BUTTON

<input type="button" onclick=

"window.alert('window.alert的效果。')"

value="點我測試">
<script language="JavaScript">

window.alert('alert'); 

</script>

小小後記

因為這個是今年初剛接觸這塊的時候摸索的結果, 記得剛寫出來的時候超開心的…
現在在做這個紀錄, 發現那時候也太憨了吧哈哈, 果然在熱中的時候每一點進步都是快樂的!

### JavaScript 弹窗实现方法 JavaScript 提供了多种弹窗的实现方式,这些方式可以根据需求分为原生弹窗和自定义模态弹窗。 #### 原生弹窗 原生弹窗是由浏览器内置支持的功能,主要包括 `alert`、`prompt` 和 `confirm` 函数。它们可以直接调用并显示简单的对话框[^3]。 以下是每种类型的简单介绍及其代码示例: - **Alert**: 显示一个带有消息和确认按钮的简单对话框。 ```javascript alert("这是一个提示信息!"); ``` - **Prompt**: 显示一个允许用户输入文本的对话框,并返回用户的输入值。 ```javascript let age = prompt("请输入您的年龄?", "18"); if (age !== null) { alert(`您输入的年龄是 ${age}`); } ``` - **Confirm**: 显示一个带有“确定”和“取消”两个选项的对话框,返回布尔值表示用户的选择。 ```javascript let isConfirmed = confirm("您确定要继续吗?"); if (isConfirmed) { alert("操作已确认!"); } else { alert("操作已被取消!"); } ``` 以上三种弹窗虽然方便快捷,但由于样式固定且不可修改,在现代 Web 开发中较少单独使用[^2]。 #### 自定义模态弹窗 为了提供更灵活的设计和用户体验,开发者通常会创建自定义模态弹窗。这种方式通过 HTML 结构配合 CSS 样式以及 JavaScript 动态控制来完成[^1]。 下面是一个完整的自定义模态弹窗实现案例: ##### HTML 部分 ```html <!-- 模态弹窗 --> <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>这是一些文字内容。</p> </div> </div> <!-- 打开弹窗的按钮 --> <button id="openModalBtn">打开弹窗</button> ``` ##### CSS 部分 ```css /* 整体遮罩层 */ .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); } /* 弹窗主体 */ .modal-content { background-color: white; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 80%; } /* 关闭按钮 */ .close { color: red; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; } ``` ##### JavaScript 部分 ```javascript // 获取 DOM 元素 var modal = document.getElementById("myModal"); var btn = document.getElementById("openModalBtn"); var span = document.getElementsByClassName("close")[0]; // 绑定事件监听器 btn.onclick = function () { modal.style.display = "block"; }; span.onclick = function () { modal.style.display = "none"; }; window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } }; ``` 这种实现方式提供了完全可控的外观设计和行为逻辑,适合复杂的交互场景[^1]。 --- ### 总结 对于简单的通知或询问,可以使用原生的 `alert`、`prompt` 或 `confirm`;而对于需要高度定制化的弹窗,则推荐采用基于 HTML/CSS/JS 的自定义模态窗口解决方案。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值