Home>

I am trying to display a modal screen when the button on the bottom right is clicked, but I want to close the modal screen when I click in a place other than modal, but do without using jquery. Is it possible?

Display form with the button at the bottom right
<!-- ── Modal form|Display button ── -->
<button onclick="
document.moform.classList.toggle('open' );
document.getElementById('mobutton' ).classList.toggle('open' );
"></button>
<!-- ── Modal form|Form ── -->
<form name="moform">
 modal form:<input>
</form>
/* ── Modal form|Display button ── */
#mobutton {
position: fixed;right: 8px;bottom: 8px;z-index: 9999;
display: block;
box-sizing: border-box;
width: 32px;height: 32px;
border-radius: 50%;
border: solid 4px #f69;
outline: none;
background: #fff center center/cover
url( "data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height ='32'><polyline stroke-width='4' stroke-linecap='round' stroke='%23f69' fill='none' points='8,14 16,6 24,14' /><line stroke -width='4' stroke-linecap='round' stroke='%23f69' fill='none' x1='16' y1='6' x2='16' y2='24' /></svg>");
cursor: pointer;
transition: 0.2s;
}
#mobutton.open {transform: rotate( 180deg )}
/* ── Modal form | Hide ── */
[name="moform" ]{
position: fixed;left: 0px;top: 0px;z-index: 999;
width: 100vw;height: 100vh;
background: rgba( 0, 0, 0, 0.5 );
opacity: 0;
transition: 0.2s;
pointer-events: none;
}
[name="moform" ]>div {
position: absolute;left: 0px;top: 100%;
box-sizing: border-box;
width: 100%;
min-height: 200px;
padding: 20px;
border-radius: 8px 8px 0px 0px;
background: #fff;
transition: 0.2s;
}
/* ── Modal form|Display ── */
[name="moform" ].open {opacity: 1;pointer-events: auto}
[name="moform" ].open >div {transform: translateY( -100% )}
  • Answer # 1

    I tried it. it is complete.

    If you paste the following code, it will work,
    It seems better not to do onclick.

    <!DOCTYPE html>
    <html lang="ja">
    <head>
      <meta charset="UTF-8" />
      <title>modal</title>
      <style>
            .bg {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                background-color: transparent;
                border: none;
                outline: none;
                padding: 0;
                appearance: none;
                width: 100%;
                height: 100%;
            }
            .bgClose {
                cursor: pointer;
                background-color: rgba(0, 0, 0, 0.5);
            }
            /* ── Modal form|Display button ── */
            #mobutton {
                position: fixed;
                right: 8px;
                bottom: 8px;
                z-index: 3;
                display: block;
                box-sizing: border-box;
                width: 32px;
                height: 32px;
                border-radius: 50%;
                border: solid 4px #f69;
                outline: none;
                background: #fff center center/cover url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32'><polyline stroke-width='4' stroke-linecap='round' stroke='%23f69' fill='none' points='8,14 16,6 24 ,14' /><p></svg>");
                cursor: pointer;
                transition: 0.2s;
            }
            #mobutton.open {
                transform: rotate(180deg)
            }
            /* ── Modal form | Hide ── */
            [name="moform"] {
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100vw;
                height: 100vh;
                opacity: 0;
                transition: 0.2s;
                pointer-events: none;
            }
            [name="moform"]>div {
                position: absolute;
                left: 0px;
                top: 100%;
                box-sizing: border-box;
                width: 100%;
                min-height: 200px;
                padding: 20px;
                border-radius: 8px 8px 0px 0px;
                background: #fff;
                transition: 0.2s;
                z-index: 3;
            }
            /* ── Modal form|Display ── */
            [name="moform"].open {
                opacity: 1;
                pointer-events: auto
            }
            [name="moform"].open>div {
                transform: translateY(-100%)
            }
      </style>
    </head>
    <body>
        Display form with the button at the bottom right
      <!-- ── Modal form|Display button ── -->
      <button id="mobutton" onclick="
        document.moform.classList.toggle('open' );
        document.getElementById('mobutton' ).classList.toggle('open' );
        document.getElementById('hideBtn').classList.toggle('bgClose')
        "></button>
      <!-- ── Modal form|Form ── -->
      <form name="moform">
             modal form:<input>
          <button id="hideBtn"></button>
      </form>
      <script>
            const form = document.getElementsByTagName("form")[0];
            const btn = document.getElementById('mobutton');
            hideBtn.addEventListener("click", () =>{
                if (form.classList.contains("open")) {
                    mobutton.click();
                }
            });
      </script>
    </body>
    </html>

  • Answer # 2

    It depends on how you want to implement modal, but if you use dialog and remove your hand, it looks like this

    codepen dialog open/close