html+js 弹出对话框(模态框)

最新推荐文章于 2022-04-14 16:20:13 发布

貑娤不嬡伱

最新推荐文章于 2022-04-14 16:20:13 发布

阅读量718

点赞数

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_42455970/article/details/118550354

版权

前端专栏收录该内容

19 篇文章

订阅专栏

本文详细介绍了如何使用HTML和JavaScript技术创建弹出对话框，即模态框。通过实例代码和步骤解析，帮助读者理解实现过程，适用于网页交互设计和前端开发学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="modalBox">
    <dialog>
        <button id="close">&Chi;</button> <!-- x ->
        <form  method="post" action="result.html"><!--（表示向何处发送表单数据） -->
            <p>  名字：<input name="name" type="text" >  </p>
            <p>  密码：<input name="pass" type="password" >  </p>
            <p>
                <input type="submit" name="Button" value="提交"/>
                <input type="reset" name="Reset" value="重填" /> 
            </p>
            <textarea  name="showText"  cols="x"   rows="y">文本内容 </textarea>
        </form>
    </dialog>
</div>

<button id="show">显示对话框</button>
<script>
var modalBox = document.getElementById("modalBox")
var dialog = document.querySelector("dialog");
document.querySelector("#show").onclick = function(){
    showModal()
};
function showModal(){
    modalBox.style.display='block';
}
document.querySelector("#close").onclick = function(){
    close();
};
function close(){
    modalBox.style.display="none";
}
</script>