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

modal در وب (دیالوگ)

علی صفاری
علی صفاری

سلام

امروز میخایم یاد بدیم که چطور یک modal در سایت خود قرار بدیم و زش استفاده کنیم

شاید براتون سوال پیش بیاد که مودال چیه

در قسنت زیر یک نمونه مودال وجود دارد

See the Pen مودال by علی صفاری (@alisaffari)on CodePen.21951

 

 

برای شروع باید کد های زیر رو در قالب خودتون قرار بدید

کد های css  (ترجیها در هدر قالب قرار گیرد)

<style type="text/css">
  .mask {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    background: #000;
    z-index: 200;
    opacity: .4;
    display: none;
  }
.modal {
    width: 400px;
    background: rgb(255, 255, 255) none repeat scroll 0% 0%;
    z-index: 300;
    margin: auto;
    position: fixed;
    border-radius: 7px;
    box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
    padding: 20px;
    display: none;
    right: 0px;
    left: 0px;
    top: 16%;
}
.titr_modal {
    font-size: 23px;
    padding: 8px 0px 17px;
}
.text_modal {
    text-align: justify;
}

.btn_bar_modal {
 
    margin-top: 13px;
}
.btn_bar_modal a {
    text-decoration: none;
    padding: 5px 15px;
    color: #000;
    margin-left: 7px;
    border-radius: 4px;
}
.btn_open {
    background: #F8F8F8 none repeat scroll 0% 0%;
    padding: 7px 20px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    color: #363636;
    margin-right: 13px;
}
.btn_bar_modal a:hover {

    background: #B9B9B9;
}

.block {
    text-align: center;
    padding: 30px 0px;
}
.btn_open {
    background: #F8F8F8;
    padding: 7px 20px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16), 0px 2px 10px 0px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    color: #363636;
}
@-webkit-keyframes fadeInDown {
  ۰% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  ۱۰۰% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}


@keyframes fadeInDown {
  ۰% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }

  ۱۰۰% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}

@-webkit-keyframes fadeOutDown {
  ۰% {
    opacity: 1;
  }

  ۱۰۰% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

@keyframes fadeOutDown {
  ۰% {
    opacity: 1;
  }

  ۱۰۰% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
          animation-name: fadeOutDown;
}


</style>

 

کد های js (ترجیها قبل از </body> قرار گیرد)

<div class="mask"></div>
<script type="text/javascript">
$('.close').click(function(e) {
  e.preventDefault();
  $(this).parent().parent().fadeOut("500");
  $(this).parent().parent().removeClass("fadeInDown");
  $(this).parent().parent().addClass("fadeOutDown");
  $('.mask').fadeOut("500");
});

$('.mask').click(function(e) {
  e.preventDefault();
  $('.modal').fadeOut("500");
  $('.modal').removeClass("fadeInDown");
  $('.modal').addClass("fadeOutDown");
  $(this).fadeOut("500");
});

 $('a[name=modal]').click(function(e) {
  e.preventDefault();
  var id = $(this).attr('href');
  $(id).fadeIn("200");
  $('.mask').fadeIn("800");
  $(id).addClass("fadeInDown");
  $(id).removeClass("fadeOutDown");
});

</script>

 

 

الان وقتش رسیده تا مودال ها رو بسازیم

نگران نباشید میتوانید بی نهایت مودال بسازید 😆

 

برای اضافه کردن مودال از کد زیر استفاده میکنیم و بهتره که این کد ها در بالای کدهای قبل قرار بگیره

<div class="modal animated " id="test1">
  <div style="font-size: 23px; padding: 8px 0px 17px;" class="titr_modal">
    عنوان مودال یک
  </div>
  <div class="text_modal">
   لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
  </div>
  <div class="btn_bar_modal">
    <a class="close" href="">بستن</a>
    
  </div>
</div>

 

برای ساخت تعداد بیشتر مودال کد بالا رو تکرار میکنیم و برای هر کدام یک ای دی منحصر به فرد انتخواب میکنیم(مهم)

 

مثلا در کد بالا ایدی منحصر به فرد ما test1 هست

 

برای مثال ما در کد های زیر دو مودال داریم با ای دی های test1  و test2

 

<div class="modal animated " id="test1">
  <div style="font-size: 23px; padding: 8px 0px 17px;" class="titr_modal">
    عنوان مودال یک
  </div>
  <div class="text_modal">
   لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
  </div>
  <div class="btn_bar_modal">
    <a class="close" href="">بستن</a>
    
  </div>
</div>

<div class="modal animated " id="test2">
  <div style="font-size: 23px; padding: 8px 0px 17px;" class="titr_modal">
    عنوان مودال یک
  </div>
  <div class="text_modal">
   لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
  </div>
  <div class="btn_bar_modal">
    <a class="close" href="">بستن</a>
    
  </div>
</div>

 

خب الان ما موال های خودمونو ساختیم و وقتشه که مودال رو فعال کنیم تا دیالوگ به نمایش بیاد

برای این کار از کد زیر استفاده میکنیم

<a name="modal" href="#test1">نمایش مودال یک</a>

برای مثال بعد از کلیک بروی لینک بالا مودال با ایدی test1 فعال میشه

توجه حتما در این قسمت قبل از ای دی یک # قرار دهید.

 

این هم یک نمونه از مودال ها

 

 

See the Pen مودال by علی صفاری (@alisaffari) on CodePen.21951

 

نظرات شما موجب دلگرمی ما است :mrgreen: