تحليل مفصل لمواصفات النافذة المنقولة في bootstrap وخصائصها

يمكنك النظر في نافذة الحوار إذا كنت بحاجة إلى استخدام نافذة الحوار في العمل

<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true" id="btnCancel">
            ×
          </button>
          <h4 class="modal-title" id="myModalLabel">
            إدارة القائمة الأمامية
          </h4>
        </div>
          <div class="modal-body">
            <div>
              <table width="100%" border="0" class="userCon_2">
                <tr>
                  <th width="30%">الاسم：</th>
                  <td width="70%">
                    <input type="text" name="Name" class="form-control" style="border-radius:3px; width:220px;" id="txtName" required="" aria-required="true">
                  </td>
                </tr>
                <tr>
                  <th>نوع الحركة：</th>
                  <td>
                    <select class="selectpicker show-tick" id="txtType" style="height: 30px; width: 220px;" name="Type">
                      <option value="view">view</option>
                      <option value="click">click</option>
                    </select>
                  </td>
                </tr>
                <tr>
                  <th>المسار:</th>
                  <td>
                    <input type="text" name="Url" class="form-control" style="border-radius:3px; width:220px;" id="txtUrl" required="" aria-required="true" />
                  </td>
                </tr>
                <tr>
                  <th>ترتيب:</th>
                  <td>
                    <input type="text" name="Rank" class="form-control" style="border-radius:3px; width:220px;" id="txtRank" />
                    <input type="hidden" name="MainMenuGuid" value="" id="txtMainMenuGuid" />
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="modal-footer" style="border-top:none;">
            <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">إغلاق</button>
            <button type="submit" class="btn btn-primary" id="btnSave">حفظ</button>
          </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal -->
  </div>

في اللوحة النموذجية، هناك خاصية يمكن منع إغلاق اللوحة النموذجية عند النقر على طبقة الشاشة. وهي إعداد data-backdrop="static" في div. هذا يمكن منع التشغيل غير المتوقع للوحة النموذج عند إدخال محتوى في اللوحة النموذجية.

هناك أيضًا خاصية واحدة أخرى: data-keyboard="false". هذا الإجراء هو لجعل مفتاح الخروج ESC غير فعال. وهو أيضًا لمنع التشغيل غير المتوقع للوحة النموذج من الإغلاق.

<div id="toolbar" class="btn-group">
      <button id="btn_add" type="button" class="btn btn-newAdd" data-toggle="modal" data-target="#userModal">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>إضافة جديدة
      </button>
      <button id="btn_edit" type="button" class="btn btn-newAdd">
        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>تعديل
      </button>
      <button id="btn_delete" type="button" class="btn btn-newAdd">
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>حذف
      </button>
</div>

خصائص الزر data-toggle="modal" data-target="#userModal" مفتاح مفتاح فتح النافذة المنبثقة.

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويعود حقوق الطبع والنشر إلى المالك الأصلي، يتم جمع المحتوى من قبل المستخدمين عبر الإنترنت بشكل تلقائي وتحميله، لا يملك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل إنساني، ولا يتحمل المسؤولية القانونية المتعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فنرجو منك إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') لإبلاغنا، وقدم الدليل على الادعاء، وإذا تم التحقق من صحة الادعاء، سيتم حذف المحتوى المزعوم فورًا.