按钮弹小窗

Eccc_o

已于 2023-12-21 20:56:03 修改

阅读量38

点赞数

分类专栏： Springboot 文章标签： javascript 前端 html

于 2022-05-16 16:43:02 首次发布

本文链接：https://blog.csdn.net/weixin_43444738/article/details/124802900

版权

Springboot 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1.html代码

<div id="window" class="window_css">
    <form id="msg" >
        <div id="contact_info">
            </br></br></br>
            <input name="tname" placeholder="名称" style="margin-left:100px;padding: 8px 10px;outline:none;border: 1px solid #96a5b4;border-radius: 3px;height:24px;width:150px; background:none;" type="text" />
            <input name="tplace" placeholder="地点" style="margin-left:110px;padding: 8px 10px;outline:none;border: 1px solid #96a5b4;border-radius: 3px;height:24px;width:150px; background:none;" type="text" />
            </br></br></br>
            <input name="stime" placeholder="开始" style="margin-left:100px;padding: 8px 10px;outline:none;border: 1px solid #96a5b4;border-radius: 3px;height:24px;width:150px; background:none;" type="time" />
            <input name="etime" placeholder="结束" style="margin-left:110px;padding: 8px 10px;outline:none;border: 1px solid #96a5b4;border-radius: 3px;height:24px;width:150px; background:none;" type="time" />
            </br></br></br>
            <input name="date" placeholder="日期" style="margin-left:100px;padding: 8px 10px;outline:none;border: 1px solid #96a5b4;border-radius: 3px;height:24px;width:150px; background:none;" type="date" />
            </br></br></br>
            <input id="restores" style="margin-left:120px;width:145px; height:45px;" type="button" value="确定" />
            <input style="margin-left:120px;width:145px; height:45px;" type="button" value="关闭" href="javascript:void(0)" onclick="hideWindow()">
        </div>
    </form >
</div>
<div id="shadow" class="shadow_css"></div>

2.js代码

function displayWindow() {
		/*悬浮窗口的显示,需要将display变成block*/
		document.getElementById("window").style.display = "block";
		/*将背景变暗*/
		document.getElementById("shadow").style.display = "block";
	    document.getElementById("msg").style.display = "block";
	}

	/*当点击调用此方法,将悬浮窗口和背景全部隐藏*/
	function hideWindow() {
		document.getElementById("window").style.display = "none";
		document.getElementById("shadow").style.display = "none";
		document.getElementById("msg").style.display = "none";
	}