ورود با اکانت گوگل
یا
آقای متریال

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

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

alisaffari


اطلاعات نویسنده
alisaffari

alisaffari

  • Exclusive Author
  • sold_between_10_000_and_50_000_dollars
  • bought_between_1_and_9_items
  • Iran (Islamic Republic of)
نمونه کارها
پشتیبانی
برای دیدن اطلاعات تماس تهیه کننده این محصول باید محصول رو خریداری کرده باشید

سلام

امروز میخایم یاد بدیم که چطور یک 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:

 

دیدگاه هایی که برای این مطلب ارسال شده

  1. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: علی فروردین ۱۵, ۱۳۹۵

    سلام، ممنون از آموزش های خوبتون، واقعا جای تقدیر و تشکر داره ولی یک انتقادی هم داشتم، اگه لطف کنید با دقت تر مطالب بنویسید که حداقل غلط تایپی کم تر بشه ممنون میشیم…
    من خودم یک مطلب خودم می نویسم چندبار میخونم که غلطی نداشته باشه، بد نیست شما هم همین کار انجام بدید
    ممنون و تشکر از سایت خوبتون 🙂

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: علی صفاری فروردین ۱۶, ۱۳۹۵

      ممنون بیستر دقت میکنم

  2. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: alireza فروردین ۱۸, ۱۳۹۵

    سلام
    اگه میشه فایل های همین آموزش رو در قالب یک زیپ بزارید که کسایی که مشکل دارن ، نمیتونن درستش کنن
    از فایل های شما استفاده کنن
    ممنون

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: علی صفاری فروردین ۱۸, ۱۳۹۵

      ممنون از نظرتون لطفا بیشتر توضیح بدین

  3. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: alireza فروردین ۱۸, ۱۳۹۵

    توضیح خاصی نداره
    مثلا من الان نتونستم راه اندازی کنم ، هرچی هم گشتم فایلی نبود که استفاده کنم
    لطفا همین آموزش رو در فایل های مورد نظر قرار بدید
    و برای ما بزارید که دانلود + استفاده + کدها رو ببینیم
    ممنون

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: علی صفاری فروردین ۱۸, ۱۳۹۵

      اموزش جدید براش تهیه میکنیم

  4. ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: forghani فروردین ۲۴, ۱۳۹۵

    سلام
    با تشکر از آموزش بسیار کاربردیتون…
    پیشنهادات:
    – لطفا همین Modal ها رو با استایل های دیگه ای هم قرار بدید. و از همه مهمتر امکانات اون رو افزایش بدید.
    موفق باشید

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: علی صفاری فروردین ۲۴, ۱۳۹۵

      سلام
      ممنون از نظر با ارزش شما

      چه امکانات در نظر دارین؟

    • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: علی صفاری فروردین ۲۴, ۱۳۹۵

      سلام
      ممنون از نظر با ارزش شما

      چه امکاناتی در نظر دارین؟

      • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: forghani فروردین ۲۵, ۱۳۹۵

        سلام مجدد
        جلوی عنوان یک ضربدر قرار بدید برای بستن. و زیر عنوان یک خط جداکننده؛ برای دکمه هم افکت متریال بگذارید مثل دکمه های همین سایت.
        تشکر

        • ﻧﻮﯾﺴﻨﺪﻩ ﺩﯾﺪﮔﺎﻩ: علی صفاری فروردین ۲۶, ۱۳۹۵

          سلام

          در مورد مورد اولی درست میکنیم در اولین فرصت

          درمورد افکت هم ما یه اموزش جدا درست میکنیم که هرجا دوست داشتید میتونید این افکت اعمال کنین

شما هم دیدگاهی برای این مطلب ارسال کنید

مطالب مرتبط

مطالب تصادفی

لوگوی دوستان

هایپر تمپ | HyperTemp