سؤال في bootstrap modal

محمد المصري12 · 20 مايو 2021

سلام عليكم

المودال بيظهر بالشكل التالي عندي

الكود كالتالي

<?php

include("includes/db.php");

$title = "الموردين";

?>

<!doctype html>

<html lang="ar">



<head>

    <style>
        .table-responsive{
            overflow-x: visible !important;
        }

        tbody{
            margin-bottom: 2rem;
        }
        .more{
            margin-top: 2rem !important;
        }
        .dropdown-menu-main{
            top: 40px !important;
        }

    </style>

    <?php include("includes/head.php"); ?>
</head>


<body>

    <?php include("includes/loader.php"); ?>

    <div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">

        <?php include("includes/app-header.php"); ?>

        <?php include("includes/ui-theme-settings.php"); ?>

        <div class="app-main">

            <?php include("includes/sidebar.php"); ?>

            <div class="app-main__outer">

                <div class="app-main__inner">

                    <div class="app-page-title">

                        <div class="page-title-wrapper">

                            <div class="page-title-heading">

                                <div class="page-title-icon">

                                    <i class="pe-7s-box2 icon-gradient bg-mean-fruit">

                                    </i>

                                </div>

                                <div>الموردين

                                    <div class="page-title-subheading">إستعراض الموردين

                                    </div>

                                </div>

                            </div>
							                            <div class="page-title-actions">

                                <button type="button" data-toggle="tooltip" data-placement="bottom" class="btn-shadow mr-3 btn btn-dark">

                                    <i class="fa fa-star"></i>

                                </button>

                            </div>

                        </div>

                    </div>
					

<table class="table table-primary table-bordered" dir="rtl">
  <thead>
    <tr class="table-primary" align="center">
      <th scope="col">الكود</th>
      <th scope="col">اسم الشركة</th>
      <th scope="col">بنود التوريد</th>
	      <th scope="col">إعدادات</th>
    </tr>
  </thead>
  
  <tbody>
 <?php

//الاستعلام
$result = $conn->query("SELECT * FROM supplier ORDER BY id DESC");
// تعريف المتغيرات


while ($row = $result->fetch_assoc()) {
//تعريف بنود التوريد
$supplying_data = '
<select class="form-select form-select-lg mb-3" aria-label="بنود التوريد">
<option selected>افتح لمشاهدة بنود التوريد</option> 
';


                            if ($row['sFabric'] == "true")
                                $supplying_data .= '<option>قماش</option> ';
                            if ($row['sAcc'] == "true")
                                $supplying_data .= '<option>اكسسوارات</option>';
                            if ($row['sCarton'] == "true")
                                $supplying_data .= '<option>كرتون</option>';
                            if ($row['sLine'] == "true")
                                $supplying_data .= '<option>خيوط</option>';
                            if ($row['sNeedle'] == "true")
                                $supplying_data .= '<option>إبر حياكة</option>';
                            if ($row['sMac'] == "true")
                                $supplying_data .= '<option>مكن</option>';
                            if ($row['sBag'] == "true")
                                $supplying_data .= '<option>أكياس</option>';

                                                  $supplying_data .= '</select>

';
//نهاية تعريف بنود التوريد	

//الجدول

echo'
  <tr class="table-light" align="center">
      <th scope="row">' . $row['id'] . '</th>
      <td >' . $row['facory'] . '</td>
      <td>' . $supplying_data . '</td>
	     <td align="center">
		 <button type="button" class="btn btn-info" data-toggle="modal" data-target="#more">عرض المزيد</button>
		 <button type="button" class="btn btn-primary">تعديل</button>
		 <button type="button" class="btn btn-danger">حذف</button>
		 
		 </td>
    </tr>';
}
?>

    
	  </tbody>
	  </table>
	  

} 
<?php

 include("includes/footer.php"); ?>
 
<!-- Starting More Modal -->
<!-- Modal -->
  <!-- Modal -->

    <div class="modal fade" id="more" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-lg" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel">بيانات المورد</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 class="table-responsive text-center">

                        <table class="align-middle mb-0 table table-borderless table-striped table-hover">

                            <thead>

                                <tr>

                                    <th class="text-center">إسم الشركة/المورد</th>

                                    <th class="text-center">إسم صاحب الشركة</th>

                                    <th class="text-center">العنوان</th>

                                    <th class="text-center">بيانات الموردين</th>


                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th class="text-center facory"></th>

                                    <th class="text-center oName"></th>

                                    <th class="text-center address"></th>

                                    <th class="text-center ">

                                        <div class="dropdown">
                                            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                بيانات التوريد
                                            </button>
                                            <div class="dropdown-menu supplying_data" aria-labelledby="dropdownMenu2">



                                            </div>
                                        </div>

                                    </th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">رقم التليفون</th>

                                    <th colspan="2" class="text-center">رقم الواتساب</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center phone"></th>

                                    <th colspan="2" class="text-center whatsapp"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">البريد الإلكترونى</th>

                                    <th colspan="2" class="text-center">الويب سايت</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center email"></th>

                                    <th colspan="2" class="text-center website"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">صفحة الفيسبوك</th>

                                    <th colspan="2" class="text-center">تيليجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center facebook"></th>

                                    <th colspan="2" class="text-center telegram"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">تويتر</th>

                                    <th colspan="2" class="text-center">انستجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center twitter"></th>

                                    <th colspan="2" class="text-center instagram"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="4" class="text-center" style="color:blue;">بيانات التواصل غير المالك</th>


                                </tr>

                            </thead>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">رقم التليفون</th>

                                    <th colspan="2" class="text-center">رقم الواتساب</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center phone2"></th>

                                    <th colspan="2" class="text-center whatsapp2"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">البريد الإلكترونى</th>

                                    <th colspan="2" class="text-center">الويب سايت</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center email2"></th>

                                    <th colspan="2" class="text-center website2"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">صفحة الفيسبوك</th>

                                    <th colspan="2" class="text-center">تيليجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center facebook2"></th>

                                    <th colspan="2" class="text-center telegram2"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">تويتر</th>

                                    <th colspan="2" class="text-center">انستجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center twitter2"></th>

                                    <th colspan="2" class="text-center instagram2"></th>

                                </tr>

                            </tbody>






                            <thead>

                                <tr>

                                    <th colspan="4" class="text-center" style="color:blue;">كود QR</th>


                                </tr>

                            </thead>

                            <thead>

                                <tr>


                                    <th colspan="4" class="text-center">

                                        <img id="qr" src="#">

                                    </th>


                                </tr>

                            </thead>

                        </table>

                    </div>

                </div>

                <div class="modal-footer text-center">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>

                </div>

            </div>

        </div>

    </div>
<!-- Endind More Modal -->

  <?php include("includes/js.php"); ?>
  


</body>



</html>

ممكن اعرف ايه الخطأ اللي عندي اللي بيخلي الصفحة تتجمد اول ما افتح المودال و ما بعرفش اعمل اي حاجة تاني

Adnane Kadri · 20 مايو 2021

الظاهر أن خلفية المودل modal-backdrop تظهر فوق المودل modal نفسه .

يحدث هذا السلوك عادة بسبب إمتلاك الحاوي لعنصر المودل الوضعية الثابتة fixed أو النسبية relative لذلك ينصح دوما بوضع المودل قبل وسم إغلاق الـ body مباشرة لتجنب هاته المشكلة أو التأكد من إمتلاك كل الحاويات لعنصر المودل الوضعية الإفتراضية . لكن في هاته الحالة ألحظ أنه يوجد بعض الوسوم المفتوحة التي لم يتم إغلاقها . في هاته الحالة تم إعتبارها كحاويات لما بعدها من عناصر مفتوحة أو مغلقة متضمنة المودل نفسه . لاحظ :

<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">

    <div class="app-main">

            <div class="app-main__outer">

                <div class="app-main__inner">

                    <div class="app-page-title">
                    </div>
                  
                # < < < من المفروض وجود وسم إغلاق 
           
             # < < < من المفروض وجود وسم إغلاق 
                  
     # < < < من المفروض وجود وسم إغلاق  
               
# < < < من المفروض وجود وسم إغلاق   
                  
<table class="table table-primary table-bordered" dir="rtl"> 
...
</table>

لاحظ أيضا أن الحاوي الأول (عدم إغلاقه سيجعله حاويا لكل الوسوم المغلقة أو المفتوحة بعده) يملك الوضعية الثابتة بسبب الصفوف fixed-header و fixed-sidebar و هذا غالبا ما أدى إلى ظهور المشكلة .

فحل المشكلة ببساطة هو في إغلاق الوسوم المفتوحة .

إذ لم يكن هذا كفيلا بحل المشكلة يمكنك إعادة ترتيب العناصر على المحور Z عن طريق الخاصية z-index . فعندما تتداخل العناصر يمكن عن طريق تحديد قيمة هذه الخاصية تحديد ما هو العنصر الذي سيظهر أعلى بقية العناصر .

يمكنك إعطاء العنصر بالصف modal-backdrop قيمة أقل :

.modal-backdrop {
  z-index: -1;
}

محمد المصري12 · 20 مايو 2021

شكرا جزيلا لك اخي الفاضل

فعلا اتحلت بعد اغلاق الوسوم المفتوحة

ربنا يكرمك

محمد المصري12 · 21 مايو 2021

بتاريخ 8 ساعات قال Adnane Kadri:
الظاهر أن خلفية المودل modal-backdrop تظهر فوق المودل modal نفسه .

يحدث هذا السلوك عادة بسبب إمتلاك الحاوي لعنصر المودل الوضعية الثابتة fixed أو النسبية relative لذلك ينصح دوما بوضع المودل قبل وسم إغلاق الـ body مباشرة لتجنب هاته المشكلة أو التأكد من إمتلاك كل الحاويات لعنصر المودل الوضعية الإفتراضية . لكن في هاته الحالة ألحظ أنه يوجد بعض الوسوم المفتوحة التي لم يتم إغلاقها . في هاته الحالة تم إعتبارها كحاويات لما بعدها من عناصر مفتوحة أو مغلقة متضمنة المودل نفسه . لاحظ :
<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">

    <div class="app-main">

            <div class="app-main__outer">

                <div class="app-main__inner">

                    <div class="app-page-title">
                    </div>
                  
                # < < < من المفروض وجود وسم إغلاق 
           
             # < < < من المفروض وجود وسم إغلاق 
                  
     # < < < من المفروض وجود وسم إغلاق  
               
# < < < من المفروض وجود وسم إغلاق   
                  
<table class="table table-primary table-bordered" dir="rtl"> 
...
</table>
                  
                  
لاحظ أيضا أن الحاوي الأول (عدم إغلاقه سيجعله حاويا لكل الوسوم المغلقة أو المفتوحة بعده) يملك الوضعية الثابتة بسبب الصفوف fixed-header و fixed-sidebar و هذا غالبا ما أدى إلى ظهور المشكلة .

فحل المشكلة ببساطة هو في إغلاق الوسوم المفتوحة .

إذ لم يكن هذا كفيلا بحل المشكلة يمكنك إعادة ترتيب العناصر على المحور Z عن طريق الخاصية z-index . فعندما تتداخل العناصر يمكن عن طريق تحديد قيمة هذه الخاصية تحديد ما هو العنصر الذي سيظهر أعلى بقية العناصر .

يمكنك إعطاء العنصر بالصف modal-backdrop قيمة أقل :
.modal-backdrop {
  z-index: -1;
}

سلام عليكم

اخي الفاضل الان انا ضفت مودال لتأكيد الحذف بالشكل الموضح بالكود و تأكدت من اغلاق جميع الوسوم لكنه ايضا حدثت معه نفس المشكلة الواردة بالموضوع ، هل اطمع في القاء نظرة فضلا

<?php

include("includes/db.php");

$title = "الموردين";

?>

<!doctype html>

<html lang="ar">



<head>

    <style>
        .table-responsive{
            overflow-x: visible !important;
        }

        tbody{
            margin-bottom: 2rem;
        }
        .more{
            margin-top: 2rem !important;
        }
        .dropdown-menu-main{
            top: 40px !important;
        }

    </style>

    <?php include("includes/head.php"); ?>
</head>


<body>

    <?php include("includes/loader.php"); ?>

    <div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">

        <?php include("includes/app-header.php"); ?>

        <?php include("includes/ui-theme-settings.php"); ?>

        <div class="app-main">

            <?php include("includes/sidebar.php"); ?>

            <div class="app-main__outer">

                <div class="app-main__inner">

                    <div class="app-page-title">

                        <div class="page-title-wrapper">

                            <div class="page-title-heading">

                                <div class="page-title-icon">

                                    <i class="pe-7s-box2 icon-gradient bg-mean-fruit">

                                    </i>

                                </div>

                                <div>الموردين

                                    <div class="page-title-subheading">إستعراض الموردين

                                    </div>

                                </div>

                            </div>
							                            <div class="page-title-actions">

                                <button type="button" data-toggle="tooltip" data-placement="bottom" class="btn-shadow mr-3 btn btn-dark">

                                    <i class="fa fa-star"></i>

                                </button>

                            </div>

                        </div>

                    </div>
					
 <div class="table-responsive">
<table class="table table-primary table-bordered" dir="rtl">
  <thead>
    <tr class="table-primary" align="center">
      <th scope="col">الكود</th>
      <th scope="col">اسم الشركة</th>
      <th scope="col">بنود التوريد</th>
	      <th scope="col">إعدادات</th>
    </tr>
  </thead>
  
  <tbody>
 <?php

//الاستعلام
$result = $conn->query("SELECT * FROM supplier ORDER BY id DESC");
//امر الحذف
if (isset($_GET['del'])){
	$terminated_user = $_GET['del'];
	$del = $conn->query("DELETE FROM `supplier` WHERE `supplier`.`id` = $terminated_user ");
	header('Location: s.php');
}
// تعريف المتغيرات


while ($row = $result->fetch_assoc()) {
//تعريف بنود التوريد
$id = $row['id'];
$factory = $row['facory'];
$supplying_data = '
<select class="form-select form-select-lg mb-3" aria-label="بنود التوريد">
<option selected>افتح لمشاهدة بنود التوريد</option> 
';


                            if ($row['sFabric'] == "true")
                                $supplying_data .= '<option>قماش</option> ';
                            if ($row['sAcc'] == "true")
                                $supplying_data .= '<option>اكسسوارات</option>';
                            if ($row['sCarton'] == "true")
                                $supplying_data .= '<option>كرتون</option>';
                            if ($row['sLine'] == "true")
                                $supplying_data .= '<option>خيوط</option>';
                            if ($row['sNeedle'] == "true")
                                $supplying_data .= '<option>إبر حياكة</option>';
                            if ($row['sMac'] == "true")
                                $supplying_data .= '<option>مكن</option>';
                            if ($row['sBag'] == "true")
                                $supplying_data .= '<option>أكياس</option>';

                                                  $supplying_data .= '</select>

';
//نهاية تعريف بنود التوريد	

//الجدول

echo'
  <tr class="table-light" align="center">
      <th scope="row">' . $row['id'] . '</th>
      <td >' . $row['facory'] . '</td>
      <td>' . $supplying_data . '</td>
	     <td align="center">
		  <button facory="'.$row['facory'].'" oName="'.$row['oName'].'" address="'.$row['address'].'" phone="'.$row['phone'].'" whatsapp="'.$row['whatsapp'].'" email="'.$row['email'].'" website="'.$row['website'].'" facebook="'.$row['facebook'].'" telegram="'.$row['telegram'].'" twitter="'.$row['twitter'].'" instagram="'.$row['instagram'].'" phone2="'.$row['phone2'].'" whatsapp2="'.$row['whatsapp2'].'" email2="'.$row['email2'].'" website2="'.$row['website2'].'" facebook2="'.$row['facebook2'].'" telegram2="'.$row['telegram2'].'" twitter2="'.$row['twitter2'].'" instagram2="'.$row['instagram2'].'" sFabric="'.$row['sFabric'].'" sAcc="'.$row['sAcc'].'" sCarton="'.$row['sCarton'].'" sLine="'.$row['sLine'].'" sNeedle="'.$row['sNeedle'].'" sMac="'.$row['sMac'].'" sBag="'.$row['sBag'].'"  qr="'.$row['qr'].'" class="btn btn-outline-primary m-auto mt-2 more" data-toggle="modal" data-target="#more">عرض المزيد</button>
		 <!-- زر التعديل -->
		 <a href="edit_supplier.php?id=' . $row['id'] . '" target="_blank"></a>
		 <button  type="button" class="btn btn-primary">تعديل</button>
		 <!-- زر الحذف -->
		 <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#del">حذف</button>
		 <!-- Delete modal -->
  <!-- Modal -->
  <div class="modal fade" id="del" role="dialog">
    <div class="modal-dialog modal-sm">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">تأكيد الخذف</h4>
        </div>
        <div class="modal-body">
          <p>هل تريد فعل حذف هذا المورد ، لن يمكنك التراجع</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">الغاء</button>
        </div>
      </div>
    </div>
  </div>


		 
		 
		 </td>
    </tr>';
}
?>

    
	  </tbody>
	  </table>
	  
</div>


</div>
</div>

</div>

<?php include("includes/footer.php"); ?>
</div>

<!-- Starting More Modal -->
<!-- Modal -->
  <!-- Modal -->

    <div class="modal fade" id="more" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-lg" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel">بيانات المورد</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 class="table-responsive text-center">

                        <table class="align-middle mb-0 table table-borderless table-striped table-hover">

                            <thead>

                                <tr>

                                    <th class="text-center">إسم الشركة/المورد</th>

                                    <th class="text-center">إسم صاحب الشركة</th>

                                    <th class="text-center">العنوان</th>

                                    <th class="text-center">بيانات الموردين</th>


                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th class="text-center facory">
									</th>

                                    <th class="text-center oName"></th>

                                    <th class="text-center address"></th>

                                    <th class="text-center supplying_data ">

                                        <div class="dropdown ">




                                            </div>
                                        </div>

                                    </th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">رقم التليفون</th>

                                    <th colspan="2" class="text-center">رقم الواتساب</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center phone"></th>

                                    <th colspan="2" class="text-center whatsapp"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">البريد الإلكترونى</th>

                                    <th colspan="2" class="text-center">الويب سايت</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center email"></th>

                                    <th colspan="2" class="text-center website"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">صفحة الفيسبوك</th>

                                    <th colspan="2" class="text-center">تيليجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center facebook"></th>

                                    <th colspan="2" class="text-center telegram"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">تويتر</th>

                                    <th colspan="2" class="text-center">انستجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center twitter"></th>

                                    <th colspan="2" class="text-center instagram"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="4" class="text-center" style="color:blue;">بيانات التواصل غير المالك</th>


                                </tr>

                            </thead>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">رقم التليفون</th>

                                    <th colspan="2" class="text-center">رقم الواتساب</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center phone2"></th>

                                    <th colspan="2" class="text-center whatsapp2"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">البريد الإلكترونى</th>

                                    <th colspan="2" class="text-center">الويب سايت</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center email2"></th>

                                    <th colspan="2" class="text-center website2"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">صفحة الفيسبوك</th>

                                    <th colspan="2" class="text-center">تيليجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center facebook2"></th>

                                    <th colspan="2" class="text-center telegram2"></th>

                                </tr>

                            </tbody>

                            <thead>

                                <tr>

                                    <th colspan="2" class="text-center">تويتر</th>

                                    <th colspan="2" class="text-center">انستجرام</th>

                                </tr>

                            </thead>

                            <tbody>

                                <tr>

                                    <th colspan="2" class="text-center twitter2"></th>

                                    <th colspan="2" class="text-center instagram2"></th>

                                </tr>

                            </tbody>






                            <thead>

                                <tr>

                                    <th colspan="4" class="text-center" style="color:blue;">كود QR</th>


                                </tr>

                            </thead>

                            <thead>

                                <tr>


                                    <th colspan="4" class="text-center">

                                        <img id="qr" src="#">

                                    </th>


                                </tr>

                            </thead>

                        </table>

                    </div>

                </div>

                <div class="modal-footer text-center">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button>

                </div>

            </div>

        </div>

    </div>
<!-- Endind More Modal -->

  <?php include("includes/js.php"); ?>
  
 <script>
 
function added() {}

        $('.dropdown-toggle').dropdown();


        $(".more").click( function() {

            var facory = $(this).attr("facory"),

                oName = $(this).attr("oName"),

                address = $(this).attr("address"),

                phone = $(this).attr("phone"),

                whatsapp = $(this).attr("whatsapp"),

                email = $(this).attr("email"),

                website = $(this).attr("website"),

                facebook = $(this).attr("facebook"),

                telegram = $(this).attr("telegram"),

                twitter = $(this).attr("twitter"),

                instagram = $(this).attr("instagram"),

                phone2 = $(this).attr("phone2"),

                whatsapp2 = $(this).attr("whatsapp2"),

                email2 = $(this).attr("email2"),

                website2 = $(this).attr("website2"),

                facebook2 = $(this).attr("facebook2"),

                telegram2 = $(this).attr("telegram2"),

                twitter2 = $(this).attr("twitter2"),

                instagram2 = $(this).attr("instagram2"),

                sFabric = $(this).attr("sFabric"),

                sAcc = $(this).attr("sAcc"),

                sCarton = $(this).attr("sCarton"),

                sLine = $(this).attr("sLine"),

                sNeedle = $(this).attr("sNeedle"),

                sMac = $(this).attr("sMac"),

                sBag = $(this).attr("sBag"),

                qr = $(this).attr("qr");

            $(".facory").html(facory);

            $(".oName").html(oName);

            $(".address").html(address);

            $(".phone").html(phone);

            $(".whatsapp").html(whatsapp);

            $(".email").html(email);

            $(".website").html(website);

            $(".facebook").html(facebook);

            $(".telegram").html(telegram);

            $(".twitter").html(twitter);

            $(".instagram").html(instagram);

            $(".phone2").html(phone2);

            $(".whatsapp2").html(whatsapp2);

            $(".email2").html(email2);

            $(".website2").html(website2);

            $(".facebook2").html(facebook2);

            $(".telegram2").html(telegram2);

            $(".twitter2").html(twitter2);

            $(".instagram2").html(instagram2);


            // from here
            $(".supplying_data").empty();

            var drop_down = `<select class="form-select" aria-label="بنود التوريد"><option selected>شاهد بنود التوريد</option>`;

            if (sFabric == "true")
                drop_down += `<option>قماش</option>`;
            if (sAcc == "true")
                drop_down += `<option>اكسسوارات</option>`;
            if (sCarton == "true")
                drop_down += `<option>كارتون</option>`;
            if (sLine == "true")
                drop_down += `<option>خيوط</option>`;
            if (sNeedle == "true")
                drop_down += `<option>إبر خياطة</option>`;
            if (sMac == "true")
                drop_down += `<option>ماكينات</option>`;
            if (sBag == "true")
                drop_down += `<option>اكياس</option>`;
			
			drop_down += `</select> `

            $(".supplying_data").append(drop_down);
            // to here

            $("#qr").attr("src", qr);

        });
 
 
 </script> 

</body>



</html>

Adnane Kadri · 21 مايو 2021

بتاريخ 10 ساعات قال محمد المصري5:

انا ضفت مودال لتأكيد الحذف بالشكل الموضح بالكود و تأكدت من اغلاق جميع الوسوم لكنه ايضا حدثت معه نفس المشكلة الواردة بالموضوع

مرحبا أخي وعليكم السلام .

أرجوا التدقيق جيدا فيما قلت سابقا .

بتاريخ 19 ساعات قال Adnane Kadri:

يحدث هذا السلوك عادة بسبب إمتلاك الحاوي لعنصر المودل الوضعية الثابتة fixed أو النسبية relative لذلك ينصح دوما بوضع المودل قبل وسم إغلاق الـ body مباشرة لتجنب هاته المشكلة أو التأكد من إمتلاك كل الحاويات لعنصر المودل الوضعية الإفتراضية . لكن في هاته الحالة ألحظ أنه يوجد بعض الوسوم المفتوحة التي لم يتم إغلاقها . في هاته الحالة تم إعتبارها كحاويات لما بعدها من عناصر مفتوحة أو مغلقة متضمنة المودل نفسه .

فالمشكلة أساسا ليست في غلق الوسوم و إنما هي في إمتلاك الحاويات للمودل للوضعية الثابتة أو النسبية . أما بالنسبة لحالة عدم غلق الوسم هي في أنها سيتم إعتبار الوسم المفتوح حاويا لما بعده و بالتالي ستقوم وضعيته الثابتة أو النسبية بالتأثير على ظهور الموديل.

صحيح أنك تقوم بغلق الوسوم بالفعل و لكن يحدث ذلك بعد إحتواءها لعنصر المودل نفسه و هذا ما يعطل ظهورها بشكل طبيعي و يجلعها تتخذ السلوك السابق .

فالحل هو إما إخراجها من العناصر التي تمتلك وضعية ثابتة أو نسبية .

أو إزالة الوضعية الثابتة أو النسبية في العناصر الحاوية .

العنصر الحاوي المقصود :

<div class="app-container app-theme-white body-tabs-shadow fixed-sidebar fixed-header">

محمد المصري12 · 21 مايو 2021

طيب بناء على كلام حضرتك ، انا شلت ال fixed position من ال container

<div class="app-container app-theme-white body-tabs-shadow">

و لسه نفس القصة او يمكن انا مش فاهم قصدك لقلة خبرتي

لو تفضلت توريني خطئي في الكود ممكن ده يساعدني افهم ، لانه التبس عليا الامر

و لك جزيل الشكر

Adnane Kadri · 21 مايو 2021

بتاريخ 3 ساعات قال محمد المصري5:
طيب بناء على كلام حضرتك ، انا شلت ال fixed position من ال container
<div class="app-container app-theme-white body-tabs-shadow">
و لسه نفس القصة

هل تستعمل أي ملفات تنسيقات خارجية ضمن وسم الـ head ؟

بتاريخ 3 ساعات قال محمد المصري5:

لو تفضلت توريني خطئي في الكود ممكن ده يساعدني افهم ، لانه التبس عليا الامر

قمت بمحاكاة الكود على جهازي ولم أواجه أي مشكلة .

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

تقسيم بنية الملفات إلى css و js و تضمينها بالملف الرئيسي .
تقسيم المكونات الكبيرة إلى مكونات أصغر يسهل تضمينها و التعامل معها و تطويرها . (من مثل : صف المورد في الجدول ) .

سؤال في bootstrap modal

السؤال

محمد المصري12

6 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

محمد المصري12

محمد المصري12

Adnane Kadri

محمد المصري12

Adnane Kadri

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية