Daniel Sternlicht dsternlicht

Founder & CEO @CommonNinja

dsternlicht / index.html

Last active November 27, 2018 15:01

Complete HTML for our vanilla modal component

	<html>
	<head>
	<title>Vanilla Modal</title>
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
	<!-- CSS Import -->
	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<!-- Clicking this button will open the modal -->
	<button id="modal_opener">Click Me! I Don't Bite... 😛</button>

dsternlicht / modal.js

Last active November 27, 2018 15:01

Main script of our vanilla JS popup

dsternlicht / modal.js

Last active November 27, 2018 14:58

React Modal component

dsternlicht / app.js

Last active November 27, 2018 15:00

Using the React Modal component

	import React, { Component } from 'react';

	import Modal from './modal/modal';

	import './app.css';

	class App extends Component {
	state = {
	showModal: false
	}

dsternlicht / app.component.html

Last active November 27, 2018 14:56

Angular app component html

	<div class="app">
	<button class="modal_opener" (click)="toggleModal()">
	Click Me! I Don't Bite... <span role="img" aria-label="emoji">😛</span>
	</button>

	<app-modal
	[show]="showModal"
	[customClass]="'custom_modal_class'"
	[closeCallback]="toggleModal"
	>

dsternlicht / app.component.ts

Last active November 27, 2018 14:56

Angular app component

	import { Component } from '@angular/core';

	@Component({
	selector: 'app-root',
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css']
	})
	export class AppComponent {
	title = 'modal-app';
	showModal = false;

dsternlicht / modal.component.html

Last active November 27, 2018 15:00

Angular modal component html

dsternlicht / modal.component.ts

Last active November 27, 2018 14:59

Angular modal component

dsternlicht / App.vue

Last active November 27, 2018 14:53

Vue app component

	<template>
	<div id="app">
	<button class="modal_opener" v-on:click="toggleModal()">
	Click Me! I Don't Bite... <span role="img" aria-label="emoji">😛</span>
	</button>

	<Modal
	v-bind="{ closeCallback: toggleModal, show, customClass: 'custom_modal_class'}"
	>
	<h2>Told Ya!</h2>

dsternlicht / Modal.vue

Last active November 27, 2018 14:59

Vue modal component

	var btn = document.getElementById('modal_opener');
	var modal = document.querySelector('.modal');

	function attachModalListeners(modalElm) {
	modalElm.querySelector('.close_modal').addEventListener('click', toggleModal);
	modalElm.querySelector('.overlay').addEventListener('click', toggleModal);
	}

	function detachModalListeners(modalElm) {
	modalElm.querySelector('.close_modal').removeEventListener('click', toggleModal);

	import React from 'react';
	import PropTypes from 'prop-types';

	import './modal.css';

	const Modal = ({ children, customClass, show, closeCallback }) => (
	<div className={`modal ${customClass}`} style={{ display: show ? 'block' : 'none'}}>
	<div className="overlay" onClick={closeCallback}></div>
	<div className="modal_content">
	{children}

	<div [ngClass]="customClass \|\| ''" class="modal" [ngStyle]="{display: show ? 'block' : 'none'}">
	<div class="overlay" (click)="closeCallback()"></div>
	<div class="modal_content">
	<ng-content></ng-content>
	<button title="Close" class="close_modal" (click)="closeCallback()">
	<i class="fas fa-times"></i>
	</button>
	</div>
	</div>

	import { Component, OnInit, Input } from '@angular/core';

	@Component({
	selector: 'app-modal',
	templateUrl: './modal.component.html',
	styleUrls: ['./modal.component.css']
	})
	export class ModalComponent implements OnInit {
	@Input() show = false;
	@Input() customClass = '';

	<template>
	<div class="modal" v-bind:class="customClass" v-bind:style="{ display: show ? 'block' : 'none' }">
	<div class="overlay" @click="closeCallback()"></div>
	<div class="modal_content">
	<slot></slot>
	<button title="Close" class="close_modal" @click="closeCallback()">
	<i class="fas fa-times"></i>
	</button>
	</div>
	</div>