آموزش طراحی مدال modal در طراحی سایت همراه ویدئو

طراحی قالب, کد های آماده آخرین بروزرسانی : ۲۱ بهمن ۱۳۹۸

آموزش طراحی مدال modal در طراحی سایت همراه ویدئو

سلام خوش اومدین! امروز یه مُدال یا modal (اسمشو درست تلفظ کنید مثل بعضیا نباشید 😆 ) درست کردیم در عین کارایی بالا طراحی بسیار خوبی داره و ساعت ها وقت گذاشته شد براش!

مدال ها پنجره های پاپ آپی هستن که روی صفحه وب و بجای باز شدن یک صفحه جدید یا تب جدید ظاهر می شون (گفتم که کارایی خوبی داره).

سایت ها از مدال ها واسه (CTA (Call To Action استفاده میکنن(یعنی کاربر یه کاری تو سایت انجام بده و همینجوری صفحه رو نبنده). این یه مثال ساده بود و با مدال ها میشه خیلی کارا انجام داد مثلا یکیش همین فرم ثبت نام یا ثبت ایمیل و…

حتما بخوانید:

آموزش کار با افزونه Social Auto Poster – ارسال مطالب سایت به اینستاگرام

مشاهده مقاله

تکنیک های نمایش مدال

خیلیا پاپ آپ رو تنظیم میکنن بعد چند ثانیه که صفحه کامل لود شد پاپ آپ هم باز بشه! به نظر من خیلی کار بی نتیجه ایه بنابراین، این روش بدترین روش نمایش مدال هست مگر این که واسه چیزهایی مثل کوکی ها و یا adblock ها بکار روند.
در زیر به متداول ترین تکنیک ها اشاره خواهد شد:

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

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

مدال های زمان دار که بعد از x دقیقه/ ثانیه اجرا می شوند.

مدال های موقعیتی که هنگامی که کاربر توسط اسکرول به محل مورد نظر می رسد اجرا می شوند.

مقایسه طراحی مدال با CSS و JS
پلاگین های جاوا اسکریت دارای استایل و کنترل بسیار زیادی هستند، معمولا این نوع از پلاگین ها جهت استفاده پیشنهاد میشن. هرچند CSS های خالص هم میتونن دارای سازگاری بیشتری باشن.

کد های html:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>کد مدال از الماس وب</title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Teko:300,400,500,600,700'>
  <link href="https://fonts.googleapis.com/css?family=Markazi+Text" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<!-- www.almasweb.org -->

<body>
  <div id="app"></div>
<a target="_blank" href="https://almasweb.org"><small>www.almasweb.org</small></a>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js'></script>
<script  src="js/index.js"></script>
</body>

<!-- www.almasweb.org -->
</html>

کد های css:

/*www.almasweb.org*/
*{
  font-family: 'Markazi Text', serif !important;
  direction: rtl;
}
body {
  font-family: 'Markazi Text', serif;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 2em;
  box-sizing: border-box;
  background: #833ab4; 
  background: -webkit-linear-gradient(to right, #12c2e9 , #f64f59);
  background: linear-gradient(to right, #bc4e9c ,#c471ed );
  color: #fff;
}

html {
  box-sizing: border-box;
  height: 100%;
}

small {
    margin-top: 20px;
    display: block;
    color: #ccc;
}
a {
	text-decoration:none;
}
h1 {
    color: #fff;
    text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.6);
    text-align: center;
    margin-bottom: 0;
    font-size: 2em;
    line-height: 1.3em;
    font-weight: bold;
    margin-top: 34px;
    padding-bottom: 42px;
    display: block;
}

button {
  font-family: 'Teko';
  padding: 10px 25px;
  color: #fff;
  background: #2980B9;
  font-size: .9em;
  line-height: 1;
  border: 0;
  outline: 0;
  border-radius: 3px;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 5px 5px -5px #333;
  transition: background 0.3s ease-in;
  margin-top: 10px;
}

button:hover {
  background: #499fd8;
}

p {
  text-shadow: 2px 2px 2px rgb(0, 0, 0, 0.6);
  font-weight: bold;
  margin: 0 0 15px 0;
  font-size: 2em;
  line-height: 1;
}

.modal {
  position: fixed;
  z-index: 1000;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-size: 14px;
  color: #000;
  border-radius: 0.5rem;
  padding: 2rem;
  width: 400px;
  min-height: 200px;
  left: 50%;
  top: 35%;
  margin-left: -230px;
  box-shadow: 0 5px 5px -5px #333;
}

.modal button {
  margin-bottom: 25px;
  padding: 2px 8px;
  border: 1px solid #000;
  background: #fff;
  color: #000;
  font-size: 20px;
  line-height: 20px;
  position: absolute;
  top: 15px;
  right: 15px;
}

.modal p {
    font-weight: 600;
    text-shadow: none;
    margin: 0;
    line-height: 2;
}
/*www.almasweb.org*/

کدهای javascript:

function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}class Modal extends React.Component {constructor(...args) {super(...args);_defineProperty(this, "state",
    { showModal: false });_defineProperty(this, "handleToggleModal",

    () => this.setState({ showModal: !this.state.showModal }));}

  render() {
    return (
      React.createElement("div", null,
      React.createElement("h1", null, "الماس وب"),
      React.createElement("button", { onClick: this.handleToggleModal }, "کلیک کنید !"),
      this.state.showModal && React.createElement("div", { className: "modal" },
      React.createElement("button", { onClick: this.handleToggleModal }, "x"),
      React.createElement("p", null, "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است."))));



  }}
;

ReactDOM.render(React.createElement(Modal, null), document.getElementById('app'));

ویدئو نمونه کد مودال :

دانلود فایل کدها:

دانلود کدها
دوستان این قسمت از فیلم آموزشی هم تموم شد امیدوارم خیلی خوشتون اومده باشه 😛

همیشه موفق باشید

4.8/5 - (6 امتیاز)

مصطفی کیانفرد

علاقه مند به وردپرس :) فعالیت زیادی در زمینه وردپرس داشتم. متخصص سئو و بهینه سازی سایت، php و امنیت، امیدوارم راهنمای خوبی برای شما عزیزان باشم.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *