Html实现简单弹窗展示UI效果

最新推荐文章于 2023-05-08 09:27:45 发布

波波斯维奇

最新推荐文章于 2023-05-08 09:27:45 发布

阅读量6.1k

点赞数 4

分类专栏： Html技巧

本文链接：https://blog.csdn.net/qq_17367039/article/details/103409118

版权

Html技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Html实现简单弹窗展示UI效果

前言

在今天的项目中，实现了一个很“神”的需求。要在Unity打出的Webgl中做一个C++代码编辑器的功能，要求像VS那样可以调用控制台调试代码。我思来想去，感觉这个功能也只能模拟了，怎么可能能实现这样的功能。于是我在网上查找资料，发现网上有很多线上C++调试网站。于是我想可不可以用Unity打出的html上展示这些C++测试界面，使用Unity调用html里的方法，用弹窗弹出C++测试界面。这就涉及到用html实现弹窗的功能，下面是简单的实现方法。

步骤

1.html代码如下图所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Test Document</title>

<style>
.box{
    width:50%; margin-top:10%; margin:auto; padding:28px;
    height:350px; border:1px #111 solid;
    display:none;            /* 默认对话框隐藏 */
}
.box.show{display:block;} 
.box .x{ font-size:18px; text-align:right; display:block;}
.box input{width:80%; font-size:18px; margin-top:18px;}
</style>
</head>  
<body> 
    
    <h2>测试</h2>
    <input type="button" onClick="msgbox(1)" value="点击弹出输入框">

    <script>  
        function msgbox(n){
            document.getElementById('inputbox').style.display=n?'block':'none';     /* 点击按钮打开/关闭 对话框 */
        }
     </script>  
     
     <div id='inputbox' class="box">
        <a class='x' href=''; οnclick="msgbox(0); return false;">关闭</a>
        <input type="text">
        <input type="text">
        <input type="button" value="确定">
     </div>
</body>

2.用浏览器打开html文件，效果如下图所示：
在这里插入图片描述
3.完成，就这样。

波波斯维奇

关注

4
点赞
踩
45

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html实现简单弹窗展示UI效果

Html实现简单弹窗展示UI效果前言在今天的项目中，实现了一个很“神”的需求。要在Unity打出的Webgl中做一个C++代码编辑器的功能，要求像VS那样可以调用控制台调试代码。我思来想去，感觉这个功能也只能模拟了，怎么可能能实现这样的功能。于是我在网上查找资料，发现网上有很多线上C++调试网站。于是我想可不可以用Unity打出的html上展示这些C++测试界面，使用Unity调用html里的...
复制链接

扫一扫