javascript - 在其他元素之上显示日历

Question

我的日历让我很头疼，因为它实际上占用了太多页面空间。

日历一开始是隐藏的:

Visible="False"

然后当我点击按钮选择我显示的日期时:

protected void btnCalendar_Click(object sender, ImageClickEventArgs e)
    {
        if (Calendar1.Visible)
        {
            Calendar1.Visible = false;
        }
        else
        {
            Calendar1.Visible = true;
        }
    }

问题是日历无论如何都会占用页面空间，即使它是隐藏的，当它打开时页面变得非常“尴尬”。

我希望日历显示在页面上其他元素的顶部，只是在“上层”，这样它就不会将页眉与页面中间分开。

有没有办法用 html 或 css 做到这一点？我曾尝试将日历放入一个 div 中，但后来我找不到任何有用的关于我需要的东西

Answer 1

2 个选项...可见不是其中之一。

你可以使用

display: none;

按照上面的建议在你的 CSS 中。设置 display none 不会显示该元素，甚至不会在页面上为其腾出空间。

更好的选择(为了美观)是使用位置、不透明度、z-index 和指针事件。这会花费更多时间，但您可以选择将元素转换到位。

#Calendar1.show {
position: absolute;
z-index: 1000;
opacity: 1;
pointer-events: auto;
transition: opacity 0.5s ease;
}

#Calendar1.hide {
opacity: 0;
pointer-events: none;
}

然后只需更改类以显示或隐藏元素...

丹尼