admin管理员组

文章数量:1379242

I have a problem with the button that closes the modal window.

The X button in the main right corner of the modal window is cut off by the area of ​​the modal window.

Example (codepen):

.modal-close {
  z-index: 9999;
  position: absolute;
  display: block;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  border: 0px;
  text-indent: -9999px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');
}
<script src=".14.9/cdn.js"></script>

<link href=".0.4/tailwind.min.css" rel="stylesheet">

<section x-data="{showModal: false, showLoading: false, html: ''}">
  <button
    class="flex justify-center animate-grow-on-hover--small cursor-pointer"
    @click="html='loading...'; showLoading = true; showModal = !showModal; 
      fetch('.0.0-3/simple-text-only-test-page.html', {
        method: 'GET',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
        },
      })
      .then(response => response.text())
        .then(text => {
          html = text,
          showLoading = false;
      })"
    >
    click me
  </button>

  <div id="bgMask" class="absolute z-90 inset-0 bg-black opacity-70" x-show="showModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-70" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-70" x-transition:leave-end="opacity-0">
  </div>
  
  <div class="relative h-full w-full">
    <!---->
    <div class="fixed z-90 inset-0 overflow-y-auto overflow-x-hidden my-6 md:my-12 mx-auto max-w-5xl w-2/3 md:rounded shadow-2xl bg-white" style="box-shadow: 0 0 10px #000;" x-show="showModal" @click.away="showModal = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
      <div x-show="showLoading" x-transition:leave="transition ease-out duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute h-full w-full inset-0 z-20 flex flex-col justify-center items-center text-gray-600 bg-white">
        <svg version="1.1" id="L9" xmlns="" xmlns:xlink="" x="0px" y="0px"
                          viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve" class="w-16 h-16 fill-current">
          <path d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
            <animateTransform
             attributeName="transform"
             attributeType="XML"
             type="rotate"
             dur="1s"
             from="0 50 50"
             to="360 50 50"
             repeatCount="indefinite" />
          </path>
        </svg>
        Loading&hellip;
      </div>
      
      <!-- Close button -->
      <div class="modal-close z-[100]" @click="showModal = false"></div>
      
      <div x-html="html"></div>
    </div>
  </div>
</section>

I have a problem with the button that closes the modal window.

The X button in the main right corner of the modal window is cut off by the area of ​​the modal window.

Example (codepen):

.modal-close {
  z-index: 9999;
  position: absolute;
  display: block;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  border: 0px;
  text-indent: -9999px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');
}
<script src="https://cdnjs.cloudflare/ajax/libs/alpinejs/3.14.9/cdn.js"></script>

<link href="https://cdnjs.cloudflare/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet">

<section x-data="{showModal: false, showLoading: false, html: ''}">
  <button
    class="flex justify-center animate-grow-on-hover--small cursor-pointer"
    @click="html='loading...'; showLoading = true; showModal = !showModal; 
      fetch('https://phet-dev.colorado.edu/html/build-an-atom/0.0.0-3/simple-text-only-test-page.html', {
        method: 'GET',
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
        },
      })
      .then(response => response.text())
        .then(text => {
          html = text,
          showLoading = false;
      })"
    >
    click me
  </button>

  <div id="bgMask" class="absolute z-90 inset-0 bg-black opacity-70" x-show="showModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-70" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-70" x-transition:leave-end="opacity-0">
  </div>
  
  <div class="relative h-full w-full">
    <!---->
    <div class="fixed z-90 inset-0 overflow-y-auto overflow-x-hidden my-6 md:my-12 mx-auto max-w-5xl w-2/3 md:rounded shadow-2xl bg-white" style="box-shadow: 0 0 10px #000;" x-show="showModal" @click.away="showModal = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
      <div x-show="showLoading" x-transition:leave="transition ease-out duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute h-full w-full inset-0 z-20 flex flex-col justify-center items-center text-gray-600 bg-white">
        <svg version="1.1" id="L9" xmlns="http://www.w3./2000/svg" xmlns:xlink="http://www.w3./1999/xlink" x="0px" y="0px"
                          viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve" class="w-16 h-16 fill-current">
          <path d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
            <animateTransform
             attributeName="transform"
             attributeType="XML"
             type="rotate"
             dur="1s"
             from="0 50 50"
             to="360 50 50"
             repeatCount="indefinite" />
          </path>
        </svg>
        Loading&hellip;
      </div>
      
      <!-- Close button -->
      <div class="modal-close z-[100]" @click="showModal = false"></div>
      
      <div x-html="html"></div>
    </div>
  </div>
</section>

Can anyone help me with this?

  • css
  • tailwind-css
  • alpine.js
  • tailwind-css-2
Share Improve this question edited Mar 28 at 14:27 rozsazoltan 10.8k6 gold badges19 silver badges53 bronze badges asked Mar 28 at 13:31 MarcifMarcif 334 bronze badges 2
  • 2 It gets cut off due to overflow-y-auto overflow-x-hidden you have on the parent div. – C3roe Commented Mar 28 at 13:43
  • You are absolutely right. – Marcif Commented Mar 28 at 13:49
Add a comment  | 

1 Answer 1

Reset to default 1

As C3roe pointed out, the overflow settings applied to the parent element won't allow you to achieve what you want. Simply avoid using them on the parent.

If you want to apply overflow-related settings to the modal content, apply them only to the content inside the modal, not to the parent that contains both the content and the close button.

.modal-close {
  z-index: 9999;
  position: absolute;
  display: block;
  top: -15px;
  right: -15px;
  width: 30px;
  height: 30px;
  border: 0px;
  text-indent: -9999px;
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==');
}
<script src="https://cdnjs.cloudflare/ajax/libs/alpinejs/3.14.9/cdn.js"></script>

<link href="https://cdnjs.cloudflare/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet">

<section x-data="{showModal: false, showLoading: false, html: ''}">
  <button
    class="flex justify-center animate-grow-on-hover--small cursor-pointer"
    @click="html='loading...'; showLoading = true; showModal = !showModal; 
        fetch('https://phet-dev.colorado.edu/html/build-an-atom/0.0.0-3/simple-text-only-test-page.html', {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
            },
        })
        .then(response => response.text())
            .then(text => {
                html = text,
                showLoading = false;
        })"
    >
    click me
  </button>

  <div id="bgMask" class="absolute z-90 inset-0 bg-black opacity-70" x-show="showModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-70" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="opacity-70" x-transition:leave-end="opacity-0">
  </div>
  
  <div class="relative h-full w-full">
    <!-- remove overflow-y-auto overflow-x-hidden from parent -->
    <div class="fixed z-90 inset-0 my-6 md:my-12 mx-auto max-w-5xl w-2/3 md:rounded shadow-2xl bg-white" style="box-shadow: 0 0 10px #000;" x-show="showModal" @click.away="showModal = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
    
      <!-- If you want to disable overflow, apply it only to the content, not the entire modal. -->
      <div x-show="showLoading" x-transition:leave="transition ease-out duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute h-full w-full inset-0 z-20 flex flex-col justify-center items-center text-gray-600 bg-white">
        <svg version="1.1" id="L9" xmlns="http://www.w3./2000/svg" xmlns:xlink="http://www.w3./1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 0 0" xml:space="preserve" class="w-16 h-16 fill-current">
          <path d="M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50">
            <animateTransform
              attributeName="transform"
              attributeType="XML"
              type="rotate"
              dur="1s"
              from="0 50 50"
              to="360 50 50"
              repeatCount="indefinite"
            />
          </path>
        </svg>
        Loading&hellip;
      </div>
      
      <div class="modal-close z-[100]" @click="showModal = false"></div>
      <div x-html="html"></div>
    </div>
  </div>
</section>

本文标签： cssProblem with positioning close button in modal windowStack Overflow

版权声明：本文标题：css - Problem with positioning close button in modal window - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744034596a2579532.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。