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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type='ractive/template' id='template'>
    
    <a href="#openModal"><button type="button" >Open Modal</button></a>

<div id="openModal" class="modalDialog">
    <div>	<a href="#close" title="Close" class="close">X</a>
        
    
          <form class="form-inline" on-submit='save'>
              <div class="form-group">
                  <select id="component" class="form-control" value={{selectedComponent}} on-change='pick-component'>
                      <option selected disabled>Select a Component</option>
        {{#componentOptions}}<option>{{.}}</option>{{/componentOptions}}
                  </select>
               </div>
              <div class="form-group">
                  <select id="actions" class="form-control" value={{selectedActions}} on-change='pick-actions' multiple>
                      <option selected disabled>Select one or more Actions</option>
          {{#actionOptions}}<option>{{.}}</option>{{/actionOptions}}
                  </select>
                </div>
              <div class="form-group">
                <input type="text" class="form-control" id="tag" placeholder="Enter TagRef" value='{{tag}}'/>
              </div>
              <div>
                  <a href="#close" on-click="save"><button type="button" >Save</button></a>
              </div>
        </form>
      </div>
      
    <!--<modal id="openModal" class="modalDialog">
    <div><a href="#close" title="Close" class="close">X</a><div>
<form class="form-inline" on-submit='save'>
  <div class="form-group">
      <select id="component" class="form-control" value={{selectedComponent}} on-change='pick-component'>
          <option selected disabled>Select a Component</option>
        {{#componentOptions}}<option>{{.}}</option>{{/componentOptions}}
      </select>
    </div>
 ...

CSS

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    right: 0;
    height: 50;
    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 data = {
    'C1': [ 'C1A1', 'C2A1'],
    'C2': [ 'C2A1', 'C2A2']
};

localStorage.setItem('componentList', JSON.stringify(Object.keys(data)));
localStorage.setItem('componentDetails', JSON.stringify(data));
//localStorage.setItem('selectedComponent', '' );




var TagWidget = Ractive.extend({
	template: '#template',
    
    oninit: function(){
        var self = this;
        
        this.set('componentOptions', JSON.parse(localStorage.getItem('componentList')));
        
        this.on('pick-component', function(e){
            
        	self.set('actionOptions', JSON.parse(localStorage.getItem('componentDetails'))[e.context['selectedComponent']]);
            
            localStorage.setItem('selectedComponent', e.context['selectedComponent'] );
            
        });
        
        this.on('pick-actions', function(e){
           console.log(e);
        });
        
        this.on('save', function(e) {
           console.log(e); 
            delete e.context.componentOptions;
            delete e.context.actionOptions;
            localStorage.setItem(e.context.tag, e.context);
            //e.original.preventDefault();
        });
        
        this.on('teardown', function() {
           
            window.localStorage.clear();
        });
        
        
    }
    
    
});

Ractive.components.widget = TagWidget;

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