سلام برنامه | HiProgram

سلام برنامه در خدمت شماست با آموزش تصویری ساخت مودال سایت (modal)

برای اون دسته از دوستان عزیز سلام برنامه که نمی دانند مودال چیست

مودال چیست؟

مودال ها پنجره های شناوری هستند که با کلیک بر روی المانی در صفحه ظاهر می شوند.

قبلا آموزش ساخت مودال تصاویر را برای شما قرار داده بودیم

امروز قصد طراحی مودال برای مصارف مختلف را داریم

برای ساخت مودال ابتدا کد های زیر را در قسمت body وارد می کنیم:

<button id="myBtn">مودال</button>

<!-- مودال -->
<div id="myModal" class="modal">

  <!-- محتوای مودال -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>سلام برنامه</h2>
    </div>
    <div class="modal-body">
      <p>سلام برنامه مرجع آموزش وب</p>
      <p>www.hiprogram.ir</p>
    </div>
    <div class="modal-footer">
      <h3>درباره سلام برنامه!!</h3>
    </div>
  </div>

</div>

برای ظاهر سازی مودال و استایل دهی به آن کد های زیر را به css خود اضافه کنید.

.modal {
    display: none; /* در حالت عادی مودال نمایش داده نشود */
    position: fixed; /* قرار گیری در موقعیت ثابت */
    z-index: 1; /* قرار گرفتن بر روی تمام المان ها */
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%; /* تمام صفحه از عرض */
    height: 100%; /* تمام صفحه از ارتفاع */
    overflow: auto; /* در صورت نیاز اسکرول کند */
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}

/* محتوای مودال */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* انیمیشن مودال */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* دکمه ی کنسل (ضربدر) */
.close {
    color: white;
    float: left;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

و در نهایت برای اجرای مودال کد های جاوا اسکریپت زیر را در قسمت head قالب اضافه کنید.

کد های زیر را می توانید در انتهای کد های html خود مودال نیز وارد کنید.

<script>
// دریافت مودال
var modal = document.getElementById('myModal');

// دریافت دکمه باز کننده مودال
var btn = document.getElementById("myBtn");

// دریافت دکمه کنسل (ضربدر)
var span = document.getElementsByClassName("close")[0];

// با کلیک روی دکمه مودال باز شود 
btn.onclick = function() {
    modal.style.display = "block";
}

// با کلیک روی کنسل (x) مودال بسته شود
span.onclick = function() {
    modal.style.display = "none";
}

// با کلیک در هر جایی خارج از مودال مودال بسته شود
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

خوب در اینجا کار ساخت مودال تمام است .

شما می توانید برای مشاهده جزئیات بیشتر آموزش تصویری ساخت مودال سایت (modal) را از باکس دانلود موجود در زیر همین پست دانلود نمایید.