آموزش CSS و HTML - کد طلایی پاپ آپ در یک نوشته

ارسال شده در وبلاگ متا - وبلاگ طراحی سایت و سئو

آموزش قرار دادن کد طلایی پاپ آپ Modal در یک نوشته هنگامی که بر روی آن کلیک میکنید بصورت حرفه ایی باز شده و در صورت مطالعه متن با کلیک بر روی دکمه ضربدر بسته می شود.

آموزش CSS و HTML - Modal

برای دیدن دمو بر روی متن زیر کلیک کنید.

W3.CSS

طراحی سایت متا

کد زیر را در سایت خود قرار دهید.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
 <h2>طراحی سایت متا</h2>
 <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">کلیک کنید</button>

<div id="id01" class="w3-modal">
 <div class="w3-modal-content">
 <div class="w3-container">
 <span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">&times;</span>
 <p>متا: سایت حسابداری، نرم افزار، مبادلات ارزها، طراحی سایت، سوئدی.</p>
 <p>خدمات علمی، آموزشی و تخصصی متا پرتال.</p>
 </div>
 </div>
 </div>
</div>
 
</body>
</html>