دانلود فايل , شرکت در انجمن و گفتگو با ساير اعضا در سايت ثبت نام کنيد
آموزش ساخت Image Modal با استفاده از HTML و CSS3
تاريخ: امروز, : چهارشنبه 23 تیر 1400 نويسنده: http://tahlilgardadeh.rozblog.com/user-admin
موضوع: آموزش طراحی سایت ,
یادگیری طراحی وب
آموزش ساخت Modal Image
در این مقاله می آموزید که یک Modal Image واکنش گرا با استفاده از CSS و جاوا اسکريپت ایجاد کنید
Modal یک کادر ارتباطی ( محاوره ای ) یا پنجره popup است که در بالای صفحه ای که داخل آن هستید نمایش داده میشود.
این مثال از اکثر کدهای مثال قبلی (Modal Box) استفاده کرده است، با این تفاوت که در این مثال از تصاویر استفاده میکنیم.
قدم اول : کد HTML را اضافه کنید.
مثال :
<!-- Trigger the Modal -->
<img id="myImg" src="http://articles.tahlildadeh.com/image.axd?picture=img_snow_wide.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
قدم دوم : کد CSS را اضافه کنید.
مثال :
قدم سوم : کد جاوا اسکریپت را اضافه کنید.
مثال :
نمونه مثال Image Modal :
برای مشاهده این نمونه برروی دوره آموزش طراحی سایت کلیک نمایید.
امتياز : | نتيجه : 0 امتياز توسط 0 نفر مجموع امتياز : 0 |
نمايش اين کد فقط در ادامه مطلب براي قرار کد مورد نظر به ويرايش قالب مراجعه کنيد
مطالب مرتبط
آموزش Image Grid
طراحی شبکه تصاویر واکنش گرا
آموزش ساخت تصاویر لایت باکس
آموزش ساخت گالری اسلاید شو برای سایت
آموزش ساخت اسلايدشو براي وبسايت
آموزش ساخت دکمه Back to Top برای صفحات وب
گرد کردن گوشه دکمه ها با CSS
آموزش ساخت دکمه با متن
آموزش ساخت دکمه های تمام عرض در سایت
آموزش طراحی منو برای دکمه بیشتر "More"