آموزش طراحی مدال modal در طراحی سایت همراه ویدئو
سلام خوش اومدین! امروز یه مُدال یا modal (اسمشو درست تلفظ کنید مثل بعضیا نباشید 😆 ) درست کردیم در عین کارایی بالا طراحی بسیار خوبی داره و ساعت ها وقت گذاشته شد براش!
مدال ها پنجره های پاپ آپی هستن که روی صفحه وب و بجای باز شدن یک صفحه جدید یا تب جدید ظاهر می شون (گفتم که کارایی خوبی داره).
سایت ها از مدال ها واسه (CTA (Call To Action استفاده میکنن(یعنی کاربر یه کاری تو سایت انجام بده و همینجوری صفحه رو نبنده). این یه مثال ساده بود و با مدال ها میشه خیلی کارا انجام داد مثلا یکیش همین فرم ثبت نام یا ثبت ایمیل و…
تکنیک های نمایش مدال
خیلیا پاپ آپ رو تنظیم میکنن بعد چند ثانیه که صفحه کامل لود شد پاپ آپ هم باز بشه! به نظر من خیلی کار بی نتیجه ایه بنابراین، این روش بدترین روش نمایش مدال هست مگر این که واسه چیزهایی مثل کوکی ها و یا 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'));
ویدئو نمونه کد مودال :
دانلود فایل کدها:
دانلود کدها
دوستان این قسمت از فیلم آموزشی هم تموم شد امیدوارم خیلی خوشتون اومده باشه 😛
همیشه موفق باشید
دیدگاهتان را بنویسید