إنشاء نافذة منبثقة باستخدام HTML , CSS

Hafsa Aly · 29 ديسمبر 2021

كيف استطيع عمل javascript prompt بجرد تحميل الصفحة

يعني مثلا كما يحدث في موقع الاكاديمية عند اختيار اضف سؤال جديد تظهر لي رسالة بتحديد القسم

.

Mohammad Al Eik · 29 ديسمبر 2021

يمكنك القيام بعرض أي شيء تريده عند تحميل الصفحة لكن يجب عليك اولاً التنصت على حدث تحميل الصفحة بالطريقة التالية باستخدام jquery

 $(document).ready(function(){
		// الكود الذي تريد تنفيذه عتد تحميل الصفحة
 });

وفي الحالة التي تسأل عنها أنت يعرض الموقع modal أي نافذة منبثقة يمكنك تنفيذ شبيه لها بإستخدام bootstrap مع الكود السابق لعملية التنصت , كالتالي:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>//استدعاء مكتبة جيكويري
<script src="js/bootstrap.min.js"></script>//استدعاء مكتبة بوتستراب
  
<script>
    $(document).ready(function(){
        $("#myModal").modal('show');//هنا نقوم بعملية تحديد العنصر الذي نريد ان نظهره عبر المحدد أي دي
    });
</script>
  
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Name">
                    </div>
                    <button type="submit" class="btn btn-primary">Subscribe</button>
                </form>
        </div>
    </div>
</div>
</body>
</html>

تم التعديل في 29 ديسمبر 2021 بواسطة Mohammad Al Eik

بلال زيادة · 29 ديسمبر 2021

من المهم معرفته هو أنك لا تستطعين التعديل على javascript prompt بل يمكنك إنشاء مثل هذه الصفحة المنبثقة كاملةٍ باستخدام CSS , HTML, jQuery فيمكنك إنشاء كود HTML بهذا الشكل

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		
	</style>
</head>
<body>
<div class="ce">
	
	<div class="form">
		<form action="">
			<select>
				<option>أسئلة </option>
				<option>أجوبة </option>
				<option>نقاشات </option>
			</select>

			<br />
			<input type="submit" name="submit">
		</form>
	</div>

</div>
</body>
</html>

و أيضا يمكنك وضع التنسيقات التالية كتوسيط النافذة المنبثقة و تنسيق حقل الاختيار و الزر


		.ce{
			display: block;
			position: relative;
			background-color: #000;
			opacity: 0.5;
			height: 100vh;
    		width: 100%;
		}

		.form{
			z-index: 9999;
			background: #fff;
		    position: absolute;
			top: 10%;
			left: 50%;
			transform: translate(-50%, -50%);
		    margin: 20px auto;
		    width: 500px;
		    box-shadow: 1px 1px 8px 3px #dbdada;
		    border: #ccc;
		    height: 150px;
		}

		.form form {
			padding: 50px 50px;
		}

		select{
			width: 80%;
		}

		input[type="submit"]{
			margin: 20px 0px;
		}

فيكون كامل الكود كالتالي

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		
		.ce{
			display: block;
			position: relative;
			background-color: #000;
			opacity: 0.5;
			height: 100vh;
    		width: 100%;
		}

		.form{
			z-index: 9999;
			background: #fff;
		    position: absolute;
			top: 10%;
			left: 50%;
			transform: translate(-50%, -50%);
		    margin: 20px auto;
		    width: 500px;
		    box-shadow: 1px 1px 8px 3px #dbdada;
		    border: #ccc;
		    height: 150px;
		}

		.form form {
			padding: 50px 50px;
		}

		select{
			width: 80%;
		}

		input[type="submit"]{
			margin: 20px 0px;
		}

	</style>
</head>
<body>
<div class="ce">
	
	<div class="form">
		<form action="">
			<select>
				<option>أسئلة </option>
				<option>أجوبة </option>
				<option>نقاشات </option>
			</select>

			<br />
			<input type="submit" name="submit">
		</form>
	</div>

</div>
</body>
</html>

Hafsa Aly · 29 ديسمبر 2021

بتاريخ 6 ساعات قال Mohammad Al Eik:

يمكنك القيام بعرض أي شيء تريده عند تحميل الصفحة لكن يجب عليك اولاً التنصت على حدث تحميل الصفحة بالطريقة التالية باستخدام jquery


 $(document).ready(function(){
		// الكود الذي تريد تنفيذه عتد تحميل الصفحة
 });

وفي الحالة التي تسأل عنها أنت يعرض الموقع modal أي نافذة منبثقة يمكنك تنفيذ شبيه لها بإستخدام bootstrap مع الكود السابق لعملية التنصت , كالتالي:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>//استدعاء مكتبة جيكويري
<script src="js/bootstrap.min.js"></script>//استدعاء مكتبة بوتستراب
  
<script>
    $(document).ready(function(){
        $("#myModal").modal('show');//هنا نقوم بعملية تحديد العنصر الذي نريد ان نظهره عبر المحدد أي دي
    });
</script>
  
</head>
<body>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
                <form>
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Name">
                    </div>
                    <button type="submit" class="btn btn-primary">Subscribe</button>
                </form>
        </div>
    </div>
</div>
</body>
</html>

اذا اردت ان اكتب قيمة داخل ال input الموجود بالمودال ومن ثم تظهر هذه القيمه في كود ال html فكيف ذلك

بلال زيادة · 29 ديسمبر 2021

بتاريخ 2 دقائق مضت قال Hafsa Aly:

اذا اردت ان اكتب قيمة داخل ال input الموجود بالمودال ومن ثم تظهر هذه القيمه في كود ال html فكيف ذلك

هل يمكنك توضيح السؤال بشكلٍ أكبر , كيف تظهر القيمة المكتوبة في كود HTML .

Mohammad Al Eik · 29 ديسمبر 2021

بتاريخ 17 دقائق مضت قال Hafsa Aly:

اذا اردت ان اكتب قيمة داخل ال input الموجود بالمودال ومن ثم تظهر هذه القيمه في كود ال html فكيف ذلك

أرجو منك التوضيح أكثر

Hafsa Aly · 30 ديسمبر 2021

بتاريخ 12 ساعات قال Mohammad Al Eik:

أرجو منك التوضيح أكثر

اقصد انني اريد الربط بين قيمة ال input او النص الذي ساكتبه فيه في الmodal وقيمة نص موجود في عنصر داخل كود ال html

بلال زيادة · 30 ديسمبر 2021

بتاريخ 41 دقائق مضت قال Hafsa Aly:

اقصد انني اريد الربط بين قيمة ال input او النص الذي ساكتبه فيه في الmodal وقيمة نص موجود في عنصر داخل كود ال html

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

<input type="text" id="text" value="Hsoub" />

فبالتالي يمكنك استخدام jQuery لجلب القيمة من داخل هذا الحقل بهذا الشكل

<script>
	$(function(){
    	var text = $('#text').val();
      	alert(text);
    });
</script>

حيث يمكنك استخدام متغير text الذي يحمل قيمة حقل الإدخال في أي مكان في كود jQuery.

إنشاء نافذة منبثقة باستخدام HTML , CSS

السؤال

Hafsa Aly

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

Recommended Posts

Mohammad Al Eik

بلال زيادة

Hafsa Aly

بلال زيادة

Mohammad Al Eik

Hafsa Aly

بلال زيادة

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية