41810


下記HTMLはブラウザを実行すると右上に、2つのボタンが現れ、このボタンを押下すれば  
自画面を呼ぶなり、ログインメニュへの遷移（PHP動作）が達成されることを期待していますが  
標題のとおり、無反応になっています。

PHPのログに何も現れていません。  
まるで画面上部がモーダルウィンドウ配下に隠れているかのごとく、操作が無効です。

===質問===  
如何したら反応できるようになるか ご教示を頂けませんでしょうか？

【HTML】

[code]

    <body>
        <div class="wrapper">
            <form method="post" action="menu.php">
                <h1>
                    <div style="width: 50%; float: left; text-align:left">
                        <img src="img/common_header_logo001.gif" width="254" heigth="25" alt="">
                    </div>
                    <div style="width: 50%; float: right; text-align:right; color:#FF0000; font-size:large" >
                        <span id="auto"></span>
                        <a href="menu.php"><img src="img/btn_tomenu_ontop.png" alt=""></a><input type="image" name="logoffbtn" src="img/btn_logoff_ontop.png" />
                    </div>
                </h1>
            </form>
            <div class="screen flex-center">
                <div class="box flex-center">
                    <ul id='nav'>
                        <li><a href='entry.php'><img src='img/btn_entry_onmenu.png' alt=''></a></li>
                        <li><a href='sort.php'><img src='img/btn_sort_onmenu.png' alt=''></a></li>
                        <li><a href='approve.php'><img src='img/btn_approve_onmenu.png' alt=''></a></li>
                        <li><a href='list.php'><img src='img/btn_list_onmenu.png' alt=''></a></li>
                        <li><a href='receiptchk.php'><img src='img/btn_receiptchk_onmenu.png' alt=''></a></li>
                        <li><a href='handexec.php'><img src='img/btn_handexec_onmenu.png' alt=''></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
    
[/code]

【CSS】

[code]

    @charset "UTF-8";
    body {
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        background-color: #F5F3EB;
        font-family: meiryo ,sans-serif;
    
        width: 100%;
        height: 100%;
    }
    
    .screen {
        position:fixed;
        box-sizing:border-box;
        width:100%;
        height:100%;
    }
    
    .box {
        width:300px;
        height:200px;
        background-size:contain;
    
        line-height:0;
    }
    
    /* フレックスレイアウト */
    .flex-center {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex: 00auto;
    }
    
    /* 伸縮防止 */
    .flex-center > * {
        flex: 00auto;
    }
    
    #modal-overlay{
        z-index:1;
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:120%;
        background-color:rgba(255,255,255,0.75);
    }
    
    #modal-overlay img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    
[/code]

【JQuery】

[code]

    $(function() {
    
        $("a").click(function() {
            //★モーダルポップアップ★
            $(this).blur() ;
            if($("#modal-overlay")[0]) return false;
            $("body").append('<div id="modal-overlay"></div>');
            $("#modal-overlay").append("<img id='loader' src='./img/ajax-loader.gif' alt='Now Loading...'>");
            $("#modal-overlay").fadeIn("slow");
        });
    
    });
    
[/code]

【追記：縦横真ん中の位置にボタンの集団を配置したい】  
[![画像の説明をここに入力](https://i.stack.imgur.com/wrLal.png)](https://i.stack.imgur.com/wrLal.png)


CC BY-SA 3.0
2018-02-17T07:08:31.877
41808
2018-02-17T13:57:52.873
2018-02-17T09:32:14.217
25696
25696
question
html jquery css
リンクタグと、input type=imageの要素を押下しても全く無反応な理由をしりたい


> まるで画面上部がモーダルウィンドウ配下に隠れているかのごとく、操作が無効です。

まさにその通りで、

[code]

        <div class="screen flex-center">
    
[/code]

内が画面全体を覆っているため操作できなくなっているようです。どのような挙動を求められているのかよくわかりませんが、仮にこれを消すとクリックができるようになるのは確認できると思います。(そもそもこのコードでは想定する動作は出来ない気もしますが……)

`positon`、特にfixedのようなものは覆いかぶさる前提のようなわりと特殊な状況でのみ使うべきであり、基礎レイアウトではあまり使わないが吉です。(そもそもpostion:fixedの持つコンテキストはややこしいものです……)

* * *

すごい雑にですが一つの例として試してみました。

[code]

    @charset "UTF-8";
    html, body {
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        background-color: #F5F3EB;
        font-family: meiryo ,sans-serif;
    
        width: 100%;
        height: 100%;
    }
    
    /* .box {
        width:300px;
        height:200px;
        background-size:contain;
    
        line-height:0;
    } */
    
    .flex-center {
        display: flex;
        align-items: center;
        align-content: center;
        justify-content: center;
        flex: 0 0 auto;
    }
    
    .wrapper > .flex-center {
        flex: 1 0 auto;
    }
    
    /* 伸縮防止 */
    .flex-center > * {
        flex: 0 0 auto;
    }
    
    #modal-overlay{
        z-index:1;
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:120%;
        background-color:rgba(255,255,255,0.75);
    
    }
    
    #modal-overlay img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
    
    .header {
        display: flex;
        justify-content: space-between;
    }
    
    .wrapper {
        display: flex;
        flex-direction: column;
        min-height: 100%;
    }
[/code]

[code]

        <div class="wrapper">
            <div class="header">
                <h1>
                    <div >
                        <img src="https://via.placeholder.com/508x50?text=LOGO" width="254" heigth="25" alt="">
                    </div>
                </h1>
                <form>
                    <div style="color:#FF0000; font-size:large">
                        <span id="auto"></span>
                        <a href="menu.php"><img src="https://via.placeholder.com/168x50?text=menu" alt=""></a>
                        <input type="image" name="logoffbtn" src="https://via.placeholder.com/168x50?text=logout" />
                    </div>
                </form>
            </div>
            <div class="flex-center">
                <div class="box flex-center">
                    <ul id='nav'>
                        <li>
                            <a href='entry.php'>
                                <img src='https://via.placeholder.com/240x40?text=%20' alt=''>
                            </a>
                        </li>
                        <li>
                            <a href='sort.php'>
                                <img src='https://via.placeholder.com/240x40?text=%20' alt=''>
                            </a>
                        </li>
                        <li>
                            <a href='approve.php'>
                                <img src='https://via.placeholder.com/240x40?text=%20' alt=''>
                            </a>
                        </li>
                        <li>
                            <a href='list.php'>
                                <img src='https://via.placeholder.com/240x40?text=%20' alt=''>
                            </a>
                        </li>
                        <li>
                            <a href='receiptchk.php'>
                                <img src='https://via.placeholder.com/240x40?text=%20' alt=''>
                            </a>
                        </li>
                        <li>
                            <a href='handexec.php'>
                                <img src='https://via.placeholder.com/240x40?text=%20' alt=''>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
[/code]

ガバガバなのでそのままでは使いにくいとは思いますが……


CC BY-SA 3.0
2018-02-17T08:47:02.257
41810
2018-02-17T13:57:52.873
2018-02-17T13:57:52.873
2376
2376
41808
answer