0

私はWPに取り組んでおり、誰かが私のWebサイトにアクセスしたときにオプションフォームを表示するために、「WordPress PopUp」というプラグインを追加しました.

特定のボックスの下の固定位置に表示する必要があります。私はそれを達成することができました。問題は、テーマがレスポンシブであるため、要素の位置がブラウザーのウィンドウ サイズに基づいて調整されることです。

他の要素と一緒に移動するにはどうすればよいですか?

HTML は次のようになります。

<div id='<?php echo $popover_messagebox; ?>' class='visiblebox' style='position: fixed; <?php echo $style; ?>'>
    <a href='' id='closebox' title='Close this box'></a>
    <div id='message' style='<?php echo $box; ?>'>
        <?php echo do_shortcode($popover_content); ?>
        <div class='clear'></div>
        <?php if($popover_hideforever != 'yes') {
            ?>
            <div class='claimbutton hide'><a href='#' id='clearforever'><?php _e('Never see this message again.','popover'); ?></a></div>
            <?php
        }
        ?>
    </div>
    <div class='clear'></div>
</div>

CSSは次のとおりです。

div#messagebox {
position: fixed;
background: none;
z-index: 999;
padding: 10px;
left: 945px;
top: 152px;
z-index: 999999;
margin: 0px;
visibility: visible;
}

div#messagebox div.claimbutton {
position: absolute;
bottom: -15px  !important;
right: 10px  !important;
width: 295px  !important;
background-color: white  !important
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
}

div#messagebox div.claimbutton a:visited, div#messagebox div.claimbutton a {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: #FFF;
text-shadow: rgba(0, 0, 0, 0.5) 0 1px !important;
font-weight: bold;
padding-right: 5px;
}

#message p {
position: relative;
clear: both;
}

#messagebox #closebox {
position: absolute;
width: 30px;
height: 29px;
background: transparent url(%styleurl%images/closemessagebland.png) no-repeat;
top: -5px;
left: -5px;
z-index: 5;
}

div#message {
position: relative;
background: #fff;
font: 0.9em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
min-height: 90%;
overflow: hidden;
border: 1px solid #ccc;
}

#messagebox. #closebox {
top: 0 !important;
left: 0 !important;
}

ここに私のウェブサイトへのリンクがあります

4

2 に答える 2

0

ピクセル値ではなくパーセンテージに基づいて要素を配置してみてください。例えば。

交換：

left: 945px;

と：

left: 50%;
于 2013-02-02T03:26:57.570 に答える