0

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

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

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

【HTML】

<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>

【CSS】

@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;
}

【JQuery】

$(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");
    });

});

【追記:縦横真ん中の位置にボタンの集団を配置したい】
画像の説明をここに入力

1 件の回答 1

1

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

まさにその通りで、

    <div class="screen flex-center">

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

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


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

@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%;
}
    <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>

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

4
  • ご見解をありがとうございます。仰られるとおりscreenという要素が問題のようでした。 当該要素に従来position:fixedを定義していたので これを辞めてみると無事右上のボタンが押下できるようになったので... 本文に現状の画面を添付致しました。outlineを赤で表示して定義要素の識別を分かりやすくしています。 本来別案件に問い合わせ内容を述べるべきかも知れませんが 達成したかったことは、真ん中6つのボタン集団を縦横真ん中の位置に配置表示することでした。 CSSが本当不得意でして...わけも分からずDIVを増やしています...。
    – saya24
    Commented 2018年2月17日 9:32
  • とりあえず想像でそれっぽく動きそうなものを入れてみました。おそらく仰ってるものとは少し異なるかと思いますが……(JSはひとまず無くしました)
    – hinaloe
    Commented 2018年2月17日 13:59
  • @hinaroe 丁寧なご説明ご支援をありがとうございました。 "positon、特にfixedのようなものは覆いかぶさる前提のようなわりと特殊な状況でのみ使うべき" そうなのですね。このコメントがとても役に立ちました。一番上の階層のdivへposition:fixedを定義したら 無事思い通りの画面になりました。とても助かりました。
    – saya24
    Commented 2018年2月18日 0:30
  • 一番上にfixedもおすすめできないですが……
    – hinaloe
    Commented 2018年2月18日 5:28

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。