HTML对话框背景遮挡了对话框内部元素的一部分。

huangapple go评论73阅读模式
英文:

HTML dialog backdrop hides part of element inside dialog

问题

我有以下代码,我想在HTML <dialog> 的左上角显示一个圆圈,但是圆圈的顶半部分被对话框的 ::backdrop 遮挡住了。有没有办法实现这个效果?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
dialog::backdrop {
  backdrop-filter: blur(1px);
}

dialog {
  min-width: 400px;
  min-height: 100px;
}

.icon {
  background-color: blue;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  position: absolute;
  top: -2rem;
  left: 1rem;
}

.dialog-actions {
  text-align: right;
}

<!-- language: lang-html -->
<button onclick="window.dialog.showModal();">打开对话框</button>

<dialog id="dialog">
  <div class="icon"></div>
  <form method="dialog">
    <div class="dialog-actions">
      <button>关闭</button>
    </div>
  </form>
</dialog>

<!-- end snippet -->
英文:

I have the following code where I would like to show a circle in the top left of an HTML &lt;dialog&gt;, but the top half of the circle gets hidden by the ::backdrop of the dialog. Is there a way to accomplish this?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

dialog::backdrop {
  backdrop-filter: blur(1px);
}

dialog {
  min-width: 400px;
  min-height: 100px;
}

.icon {
  background-color: blue;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  position: absolute;
  top: -2rem;
  left: 1rem;
}

.dialog-actions {
  text-align: right;
}

<!-- language: lang-html -->

&lt;button onclick=&quot;window.dialog.showModal();&quot;&gt;open dialog&lt;/button&gt;

&lt;dialog id=&quot;dialog&quot;&gt;
  &lt;div class=&quot;icon&quot;&gt;&lt;/div&gt;
  &lt;form method=&quot;dialog&quot;&gt;
    &lt;div class=&quot;dialog-actions&quot;&gt;
      &lt;button&gt;close&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/dialog&gt;

<!-- end snippet -->

答案1

得分: 1

看起来它被对话框本身的溢出隐藏了,而不是背景。请在对话框中添加 overflow: visible;

dialog::backdrop {
  backdrop-filter: blur(1px);
}

dialog {
  min-width: 400px;
  min-height: 100px;
  overflow: visible;
}

.icon {
  background-color: blue;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  position: absolute;
  top: -2rem;
  left: 1rem;
}

.dialog-actions {
  text-align: right;
}
<button onclick="window.dialog.showModal();">打开对话框</button>

<dialog id="dialog">
  <div class="icon"></div>
  <form method="dialog">
    <div class="dialog-actions">
      <button>关闭</button>
    </div>
  </form>
</dialog>
英文:

It looks like it's hidden by the overflow of the dialog itself, not the backdrop. Add overflow: visible; to the dialog:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

dialog::backdrop {
  backdrop-filter: blur(1px);
}

dialog {
  min-width: 400px;
  min-height: 100px;
  overflow: visible;
}

.icon {
  background-color: blue;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  position: absolute;
  top: -2rem;
  left: 1rem;
}

.dialog-actions {
  text-align: right;
}

<!-- language: lang-html -->

&lt;button onclick=&quot;window.dialog.showModal();&quot;&gt;open dialog&lt;/button&gt;

&lt;dialog id=&quot;dialog&quot;&gt;
  &lt;div class=&quot;icon&quot;&gt;&lt;/div&gt;
  &lt;form method=&quot;dialog&quot;&gt;
    &lt;div class=&quot;dialog-actions&quot;&gt;
      &lt;button&gt;close&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/dialog&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月14日 02:49:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76682428.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定