求问,如何在HarmonyOS鸿蒙Next的一个页面上,弹出一个提示(使用js、css、html)

求问,如何在HarmonyOS鸿蒙Next的一个页面上,弹出一个提示(使用js、css、html) 后端开发出身的我,前端太差了,求大神指教

8 回复

新手上路,请大神照顾!!!

更多关于求问,如何在HarmonyOS鸿蒙Next的一个页面上,弹出一个提示(使用js、css、html)的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


我给你看一下运行效果,如下图,完全没问题

多些大佬,我还一直想用alert的方式

不对啊,这个组件好像还不能用啊

肯定不是alert那种方式了,前端现在基本上都不会用alert了

在HarmonyOS鸿蒙Next中,使用JavaScript、CSS和HTML在页面上弹出提示,可以通过以下步骤实现:

  1. HTML部分:创建一个按钮用于触发提示,以及一个用于显示提示的容器。
<button id="showAlert">点击弹出提示</button>
<div id="alertBox" style="display:none;">这是一个提示</div>
  1. CSS部分:设置提示框的样式,使其在页面上居中显示。
#alertBox {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}
  1. JavaScript部分:编写逻辑,当按钮被点击时显示提示框。
document.getElementById('showAlert').addEventListener('click', function() {
    var alertBox = document.getElementById('alertBox');
    alertBox.style.display = 'block';
});
  1. 关闭提示:如果需要关闭提示,可以添加一个关闭按钮。
<div id="alertBox" style="display:none;">
    这是一个提示
    <button id="closeAlert">关闭</button>
</div>
document.getElementById('closeAlert').addEventListener('click', function() {
    var alertBox = document.getElementById('alertBox');
    alertBox.style.display = 'none';
});

通过以上步骤,你可以在HarmonyOS鸿蒙Next的页面上实现一个简单的提示弹出功能。

在HarmonyOS鸿蒙Next中,你可以使用HTML、CSS和JavaScript来创建一个简单的弹出提示。以下是一个示例代码:

按钮 onclick=“showPopup()” 显示提示

半透明的遮罩层

弹出提示 这是一个弹出提示! 按钮 onclick=“hidePopup()” 关闭

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!