江阴网站建设,江阴网站制作,江阴网站设计,江阴SEO优化,江阴小程序开发-江阴雨辰互联

  1. JustNews 首页
  2. questions

css - Problem with positioning close button in modal window - Stack Overflow

admin••questions•阅读0

I have a problem with the button that closes the modal window.The X button in the main right corner of

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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744034598a4547182.html

adminadmin
0

相关推荐

发表回复

评论列表（0条）

  • 暂无评论

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信