الصورة التي رفقتها تظهر مربع حوار أو نافذة تفاعلية في موقع الويب، وهو شيء يمكن تحقيقه باستخدام تقنيات الويب مثل HTML، CSS، و JavaScript. هذا النوع من العناصر يمكن أن يكون مفيدًا لعرض الخيارات المتاحة للمستخدمين والسماح لهم باختيار واحدة منها. يمكن تحقيق هذا النوع من الواجهات باستخدام مكتبات أو إطارات عمل جاهزة مثل jQuery UI أو Bootstrap Modal، أو يمكن تنفيذه يدويًا باستخدام HTML و CSS للتصميم و JavaScript لإضافة السلوك التفاعلي. إليك خطوات عامة لتحقيق ذلك:
-
HTML و CSS: قم بإنشاء هيكل HTML لعنصر النافذة الفرعية واستخدم CSS لتنسيقه بحيث يبدو مثل الصورة. يمكنك استخدام CSS لتحديد الألوان والحواف والحجم والموقع.
-
JavaScript: استخدم JavaScript لجعل النافذة الفرعية تظهر وتختفي بالضغط على زر أو رابط. يمكنك استخدام
display: none;وdisplay: block;لإظهار وإخفاء النافذة. -
الاستجابة للنقرات: يمكنك استخدام JavaScript للاستجابة لنقرات المستخدم وتحديد الخيار الذي تم اختياره.
-
تنفيذ الخيارات: بناءً على الخيار الذي يتم اختياره، يمكنك تنفيذ الإجراء المناسب، مثل تحميل صفحة جديدة أو عرض معلومات إضافية.
إليك مثالًا بسيطًا على كيفية بناء عنصر نافذة فرعية بسيطة باستخدام HTML، CSS، و JavaScript:
htmlhtml>
<html>
<head>
<title>مثال على نافذة فرعيةtitle>
<style>
/* تنسيق النافذة الفرعية */
.popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid black;
padding: 20px;
z-index: 1000;
}
/* تنسيق زر الإغلاق */
.close {
float: right;
cursor: pointer;
}
style>
head>
<body>
<button onclick="togglePopup()">افتح النافذةbutton>
<div id="popup" class="popup">
<span class="close" onclick="togglePopup()">xspan>
<p>هذه النافذة الفرعيةp>
<button>اختيار 1button>
<button>اختيار 2button>
<button>اختيار 3button>
div>
<script>
function togglePopup() {
var popup = document.getElementById("popup");
if (popup.style.display === "none") {
popup.style.display = "block";
} else {
popup.style.display = "none";
}
}
script>
body>
html>
هذا مثال بسيط ويمكن تعديله وتوسيعه لتناسب احتياجاتك الخاصة.
المزيد من المعلومات
بالطبع! لنوسّع المثال السابق قليلاً، يمكننا إضافة المزيد من الخيارات وتعقيد النافذة الفرعية قليلاً. فيما يلي مثال محسّن:
htmlhtml>
<html>
<head>
<title>مثال على نافذة فرعيةtitle>
<style>
/* تنسيق النافذة الفرعية */
.popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid black;
padding: 20px;
z-index: 1000;
max-width: 400px;
}
/* تنسيق زر الإغلاق */
.close {
float: right;
cursor: pointer;
}
/* تنسيق الخيارات */
.options {
margin-top: 10px;
}
.option {
display: block;
margin-bottom: 5px;
padding: 5px 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: pointer;
}
.option:hover {
background-color: #e0e0e0;
}
style>
head>
<body>
<button onclick="togglePopup()">افتح النافذةbutton>
<div id="popup" class="popup">
<span class="close" onclick="togglePopup()">xspan>
<p>اختر الخيار الذي تريده:p>
<div class="options">
<div class="option" onclick="chooseOption(1)">خيار 1div>
<div class="option" onclick="chooseOption(2)">خيار 2div>
<div class="option" onclick="chooseOption(3)">خيار 3div>
div>
<p id="chosenOption">p>
div>
<script>
function togglePopup() {
var popup = document.getElementById("popup");
if (popup.style.display === "none") {
popup.style.display = "block";
} else {
popup.style.display = "none";
}
}
function chooseOption(option) {
var chosenOption = document.getElementById("chosenOption");
chosenOption.innerHTML = "لقد اخترت الخيار " + option;
}
script>
body>
html>
هذا المثال يحتوي على زر لفتح النافذة الفرعية، وعنصر div لعرض النافذة، وزر إغلاق لإخفاء النافذة، وقائمة خيارات يمكن للمستخدم اختيارها. عند اختيار خيار، يتم عرض الخيار المختار داخل النافذة. يمكنك تعديل الأنماط والسلوك حسب احتياجاتك الخاصة.
