【问题标题】:HTML only- create a popup window from image仅 HTML - 从图像创建弹出窗口
【发布时间】:2021-11-14 05:45:38
【问题描述】:

我有一个非常简单的 HTML 网页,上面有一个大图像,上面有几个文本框(在图像中绘制),我希望用户点击这些文本框并打开一个包含更多文本的弹出窗口。目前,我在 Dreamweaver 中使用热点和行为标签来为图像上的每个框调用一个弹出窗口。

Q1 - 如何在 HTML 中隐藏弹出窗口上的滚动条?

Q2 - 有没有更好的方法来做到这一点,只需要很少的编码,比如模态弹出窗口?我有很多这样的弹出窗口,每个窗口都需要不同的文本。

提前谢谢你!

【问题讨论】:

标签: html modal-dialog popup scrollbar hide


【解决方案1】:

要隐藏滚动条,您可以使用一些 CSS,附在下面。为了制作弹出窗口,我从未尝试过热点和行为标签,但是我几天前刚刚使用绝对位置并使用显示无和块创建了一个。基本上,您必须在代码中的任何位置创建弹出窗口的整个设计,然后将其设置为显示:无,并且无论您点击什么让它弹出,您都向它添加一个小的 javascript 函数,它将更改属性要显示的弹出窗口:块或您正在使用的任何其他内容。

::-webkit-scrollbar {
    width: 0;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

【讨论】:

  • 这是我现在的弹出代码 - 我应该在哪里添加上面的代码?
  • 您可以为地图标签提供一个 id/类名,然后在 CSS 部分中简单地使用 #idname::-webkit-scrollbar {...}。如果它不起作用,请尝试在 webkit-scrollbar{...} 中使用 display none。
  • 我添加了这段代码 #Map::-webkit-scrollbar { width: 0; /* 移除滚动条空间/ background: transparent; / 可选:只是让滚动条不可见 */ } 我的地图是
  • 好像不行
  • 不,不是这样,你必须把这部分代码放在样式标签中,然后在javascript中你将编写一个如下所示的函数。函数 openPopUp(){document.getElementByID('idhere').style.display = 'block'} 在这个弹出窗口的 CSS 中你会写:#idhere {display:none}。对于您要单击的任何按钮(可以是任何标签),只需将其放在那里:onclick="openPopUp()"。并将脚本标签放在
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-10-07
  • 1970-01-01
  • 2011-09-04
  • 1970-01-01
  • 1970-01-01
  • 2010-12-01
相关资源
最近更新 更多