Modal in pure html and css

by vikikamath

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3/ractive.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure-min.css">
<a href="#openModal">Open Modal</a>

<script type='ractive/template' id='template'>
    <div id="openModal" class="modalDialog">
    <div>	<a href="#close" title="Close" class="close">X</a>
<form class="pure-form">
  <fieldset>
      <select id="component" class="form-control" value={{selectedComponent}} on-change='pick-component'>
          <option selected disabled>Select a Component</option>
        {{#componentOptions}}<option>{{.}}</option>{{/componentOptions}}
      </select>
    </fieldset>
  <fieldset>
      <select id="actions" class="form-control" multiple>
          <option selected disabled>Select one or more Actions</option>
          {{#actionOptions}}<option>{{.}}</option>{{/actionOptions}}
      </select>
    </fieldset>
  <fieldset>
    <input type="text" class="form-control" id="tag" placeholder="Enter TagRef">
  </fieldset>
  <button type="submit" class="btn btn-default">Save</button>
</form>
    </div>
    </script>

<div id='main'></div>

CSS

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}
.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background: #00d9ff;
}

JavaScript

/*var data = {
 	componentOptions: [ 'Select a Component', 'C1', 'C2'],
    actionOptions: ['Select one or more Actions', 'A1', 'A2']
};
*/
var localStorage = {}

var TagWidget = Ractive.extend({
	template: '#template',
    
    onconstruct: function () {
    	//this.set('componentOptions', [ 'Select a Component', 'C1', 'C2']);
        localStorage['C1'] = [ 'C1A1', 'C2A1'];
        localStorage['C2'] = [ 'C2A1', 'C2A2'];
        localStorage['selectedComponent'] = '';
    },
    oninit: function(){
        var self = this;
        this.set('componentOptions', [ 'C1', 'C2']);
        this.on('pick-component', function(e){
        	self.set('actionOptions', localStorage[e.context.selectedComponent]);
            localStorage['selectedComponent'] = e.context.selectedComponent;
        });
    }
});

Ractive.components.widget = TagWidget;

new TagWidget({
    el: '#main'
});