<Modal> Svelte Module: Modal Window with content insertion

*<Modal> Svelte Module: Modal Window with content insertion.md

<Modal> Component

A simple Svelte component to create a lightbox style modal window with slotted content. It closes by clicking on gray area, the X in the corner or pressing ESC on the keyboard. The ability to exit can be disabled and controlled from the App using it.

For live example see: https://svelte.technology/repl?version=2.15.3&gist=a14904a7ee58a3756bb766ef2b514cdc

App.html

<!-- Sample App to show how to use the Modal component -->

<Modal ref:help>
  <h1>Help</h1>
  <p>You can close this window by clicking the gray area, or the X in the top right corner. Or by pressing the ESC key.</p>
</Modal>

<Modal ref:wait noExit={true}>
	Wait patiently 5 seconds and this will go away...
</Modal>

<button on:click="showModal('help')">HELP</button>

<button on:click="showModal('wait')">Chill</button>


<script>
	import Modal from "./Modal.html"

	export default {
		components: {
			Modal
		},
    methods:{
      showModal(which){
        //The modal is displayed when its `visible` attribute is set to true
        this.refs[which].set({visible:true})
				if(which=="wait"){
					setTimeout(function(){
						 this.refs.wait.set({visible:false})
					}.bind(this),5000)
				}
      }
    }
  }
</script>

data.json5

{}

Modal.html

<!-- Svelte Modal component by Laszlo Szenes https://github.com/lacikawiz 

-->
<div id=top class:visible>
	<div class='modal-background' on:click='close()'></div>

	<div class='modal'>
		<slot></slot>
		<svg id="close" width="12" height="12" on:click='close()'>
			<circle cx="6" cy="6" r="6" fill="#F44" />
			<line x1="3" y1="3" x2="9" y2="9" style="stroke:#FFF;stroke-width:2" />
			<line x1="9" y1="3" x2="3" y2="9" style="stroke:#FFF;stroke-width:2" />
		</svg>
	</div>
</div>

<script>
	export default {
		methods:{
			keyPress: function(ev){
				//console.log(ev.keyCode)
				if(ev.keyCode==27){  //ESC
					this.close()
				} 
			},
			close(){  //attempted close
				if(this.get().noExit) return
				this.set({visible:false})
			}
		},
		onstate({ changed, current, previous }) {
			if(changed.visible){
				if(current.visible){
//when the modal gets active then we watch the keys
					window.addEventListener("keydown",this.keyPress)
					document.body.style.overflow="hidden" //this prevents scrolling of the main window
				} else {
//when the modal is closed then we stop watching keys
					window.removeEventListener("keydown",this.keyPress)
					document.body.style.overflow=""
					this.fire("close",this)
				}
			}
		},
		oncreate(){
			this.keyPress=this.keyPress.bind(this) //have to do this because can't use `bind` in the method declaration
		}
	}
</script>

<style>
	.modal-background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #00000030;
		cursor: pointer;
		z-index: 998;
	}

	.modal {
		position: fixed;
		left: 50%;
		top: 50%;
		overflow: auto;
		transform: translate(-50%,-50%);
		padding: 1em;
		border-radius: 6px;
		background: white;
	    border: 3px outset #ddd;
	    box-shadow: 10px 10px 5px #00000080;	
		z-index: 999;
	}

	#top {
		visibility: hidden;
	}

	.visible {
		visibility: visible !important;
	}

	#close {
		position: absolute;
		top:0;
		right:0;
		width:12px;
		height:12px;
		cursor: pointer;
	}
</style>