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

المشكلة انك تستخدم الـ 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.

بتاريخ 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

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

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

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

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

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