اذهب إلى المحتوى
  • 0

لماذا لا يمكنني الضغط على نافذة تسجيل الدخول

أبي عبد الرحمان نزار

السؤال

Recommended Posts

  • 0

المشكلة انك تستخدم الـ modal داخل عنصر fixed والذي هو الـ nav، جرب اخراجها من ال nav مثل :

<nav>
  ...
</nav>
<div style="margin-top: 500px;">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save
            changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

وستعمل على ما يرام.

إذا راجعت التوثيق الرسمي لبوتستراب ستجد انهم يخبرونك أنك لا يجب أن تضع  الـ model داخل عنصر fixed في بداية التوثيق الخاص بالـ model.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 4 دقائق مضت قال عمر قره محمد:

المشكلة انك تستخدم الـ modal داخل عنصر fixed والذي هو الـ nav، جرب اخراجها من ال nav مثل :

<nav>
  ...
</nav>
<div style="margin-top: 500px;">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch demo modal
  </button>

  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
       aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save
            changes</button>
        </div>
      </div>
    </div>
  </div>
</div>

وستعمل على ما يرام.

إذا راجعت التوثيق الرسمي لبوتستراب ستجد انهم يخبرونك أنك لا يجب أن تضع  الـ model داخل عنصر fixed في بداية التوثيق الخاص بالـ model.

معك حق لقد انحلت المشكلة و لكن ماهو سبب أنها لا تعمل إذا كانت داخل عنصر fixed

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 15 ساعة قال oubai nezar:

معك حق لقد انحلت المشكلة و لكن ماهو سبب أنها لا تعمل إذا كانت داخل عنصر fixed

عند استخدام Bootstrap Modal داخل عنصر ثابت (fixed)، قد لا يعمل بشكل صحيح. هذا يحدث لأن Bootstrap Modal يستخدم التموضع المطلق (absolute positioning) لعرض النموذج، وعند تضمين النموذج داخل عنصر ثابت، يتم تحديد موقع النموذج بالنسبة للعنصر الثابت بدلاً من النافذة. هذا يعني أن النموذج سيظهر في موضع خاطئ أو لن يظهر على الإطلاق.

لحل هذه المشكلة، يجب وضع Bootstrap Modal خارج أي عناصر ثابتة في الصفحة، حتى يتم تحديد موقع النموذج بالنسبة للنافذة. إذا كان عليك وضع Bootstrap Modal داخل عنصر ثابت، يمكن استخدام حلول برمجية مثل تحديد موقع النموذج بشكل يدوي باستخدام JavaScript. ولتجنب هذه المشكلة بشكل عام، يجب تصميم الصفحة بحيث لا تضم أي عناصر ثابتة داخل بعضها البعض. 

لذلك الحل المناسب هو وضع ال model دائماً في أعلى الصفحة بعد وسم ال body مباشرة

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...