كيفية جعل هذه النافذة المنبثقة تستجيب بحجم شاشة مختلف

1

إنني أقوم بعمل رسالة منبثقة باستخدام css و html. أنا أحاول أن أجعل التخطيط المنبثق أكثر استجابة ولكن مع معرفة CSS محدودة ، فأنا عالق. في الأساس أنا لا أريد أن أجبر div مع وحدات بكسل ثابتة قدر الإمكان. أيضا ، يا Button و Anchor url هي أيضًا مضمنة مع موقع الإصلاح في CSS. كيف يمكنني تحسين ذلك؟

عندما تظهر الشاشة المنبثقة ، أريد أن أذهب إلى الصفحة خلفها باللون الرمادي. ولكن ، يبدو أنها تعمل في jsfiddle ولكن عندما أضعها على صفحة الويب الخاصة بي ، أرى فقط نصف الصفحة باللون الرمادي عند عرض النافذة المنبثقة. كيف يمكنني جعل الصفحة الكاملة تظهر باللون الرمادي؟

يرجى الاطلاع هنا: http://jsfiddle.net/chs9x9wj/274/

ستظهر النافذة المنبثقة كما يلي:

Imagen 80

المغلق: 

div.outer {
    position: relative;
    width: 300px;
    height: 270px;
    border: 3px solid black;
    text-align: center;
    margin:auto;
    z-index: 100;
    background-color: yellow;
} 
div.outer a {
    color: blue;
} 
div.inner-right {
    position: absolute;
    top: 80px;
    right: 10px;
    width: 240px;
    height: 100px;
    /*border: 3px solid blue;*/
    text-align: left;
}

div.inner-left {
    position: absolute;
    top: 80px;
    left: 10px;
    width: 20px;
    height: 100px;
    /*border: 3px solid red;*/
    color: red;
}

div.inner-buttom {
    position: absolute;
    top: 180px;
    left: 120px;
    text-align: center;
}

.prompt-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: .8;
    z-index: 99;

}

لغة البرمجة: 

    <!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Show me the Pop Up</button>

<div class="prompt-backdrop" id="backdrop" style="visibility: hidden"></div>

<br/>

  <div class="outer" id="myPopup" style="visibility: hidden">

      <a>!</a>
      <br/><br/>

      <a>This div element has position: relative</a>
      <div class="inner-right">
        This is a fact: <br/> <br/>
        The human eye can distinguish about 10 million different colors.
      </div>
      <div class="inner-left">
          !
      </div>

      <div class="inner-buttom">
            <input type="submit" class="like" value="Next" />
            <p><a href="google.com">Go Back</a></p>
      </div>
  </div>

</body>
</html>

جافا سكريبت: 

function myFunction() {

  document.getElementById("myPopup").style.visibility = "visible";
      document.getElementById("backdrop").style.visibility = "visible";
}

3 الاجابة

0

لقد أزلت بعض المطلقات ، وعومت ووسعت الشقوق الداخلية اليسرى واليمنى وسمحت للزر بالتتالي.

تعتمد خلفية "الرمادي" على خلفية فاتحة خلفها لتظهر من خلال تعتيم 99٪ ، ربما الخلفية التي لا تصبح رمادية لها خلفية داكنة.

المغلق: 

div.outer {
    -ms-transform: translate(0px, 50%); /* IE 9 */
    -webkit-transform: translate(0px, 50%); /* Safari */
    transform: translate(0px, 50%);
    position: relative;
    width: 300px;
    height: 270px;
    border: 3px solid black;
    text-align: center;
    margin: auto;
    z-index: 100;
    background-color: yellow;
} 
div.outer a {
    color: blue;
} 
div.inner-right {
    padding-right: 10px;
    float: right;
    width: 240px;
    height: 100px;
    text-align: left;
}

div.inner-left {
    padding-left: 5px;
    float: left;
    width: 20px;
    height: 100px;
    color: red;
}

div.inner-button {
    text-align: center;
}

.prompt-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: .8;
    z-index: 99;

}

لغة البرمجة: 

    <!DOCTYPE html>
<html>
<body>
<body>

<button onclick="myFunction()">Show me the Pop Up</button>

<div class="prompt-backdrop" id="backdrop" style="visibility: hidden"></div>

<br/>

  <div class="outer" id="myPopup" style="visibility: hidden">

      <a>!</a>
      <br><br>
      <a>This div element has position: relative</a>
      <br><br>
      <div class="inner-right">
        This is a fact: <br/> <br/>
        The human eye can distinguish about 10 million different colors.
      </div>
      <div class="inner-left">
          !
      </div>
      <div class="inner-button">
            <input type="submit" class="like" value="Next" />
            <p><a href="https://www.google.com">Go Back</a></p>
      </div>
  </div>
</body>
</html>

شبيبة: دون تغيير

صورة الاختبار المنبثق

:مؤلف
مشاركة الرابط
0

http://jsfiddle.net/9x6v74sb/22/

إذا كان بإمكانك استخدام Flexbox ، فأنا أوصي بشيء من هذا القبيل.

ربما يجب عليك إضافة 

document.getElementById("back").onclick = function(e){
    e.preventDefault();
    document.getElementById("overlay").className = "";
}
:مؤلف
مشاركة الرابط
0

باستخدام max-width في CSS الخاص بك طريقة سهلة لتغيير العناصر ديناميكيًا عندما تصبح الشاشة أصغر حجمًا دون استخدام استعلامات الوسائط.

إذا كنت ترغب في الحفاظ على ارتباطاتك السفلية في المنتصف ، يمكنك تحديد عرض ، مثل. width: 100px; ، جلس left: 50%; لنقل العنصر في منتصف الطريق عبر الأصل ، ثم margin-left: -50px; (أو نصف القيمة السالبة مهما كان عرضك) من أجل توسيطه.

في ما يلي بعض الأمثلة على بعض التغييرات التي تم إجراؤها لمساعدتك على البدء: http://jsfiddle.net/chs9x9wj/281/

:مؤلف
مشاركة الرابط

أسئلة ذات صلة

أسئلة شائعة:

علامات السؤال:
فوق
قائمة طعام