a simple ko popup component

a simple ko popup component.markdown

a simple ko popup component

A Pen by spender on CodePen.

License.

index.html

<button data-bind="click:popupModel.show">show popup</button>
<popup class="warning" params="popupModel:popupModel">
  <p>
    This is a popup!
  </p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida eget dolor a interdum. Donec placerat turpis ac lacinia rhoncus. Cras urna magna, imperdiet ut imperdiet ultrices, euismod non elit. Proin vel metus pretium, bibendum tortor vel, congue quam. Sed ultrices lacus quam, nec porttitor mi scelerisque eget. Praesent accumsan varius leo nec tincidunt. Maecenas viverra ultricies purus quis rutrum.</p>
    <button data-bind="click:popupModel.hide">OK</button>
</popup>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus gravida eget dolor a interdum. Donec placerat turpis ac lacinia rhoncus. Cras urna magna, imperdiet ut imperdiet ultrices, euismod non elit. Proin vel metus pretium, bibendum tortor vel, congue quam. Sed ultrices lacus quam, nec porttitor mi scelerisque eget. Praesent accumsan varius leo nec tincidunt. Maecenas viverra ultricies purus quis rutrum.</p>
<p>Donec vel est pellentesque, vestibulum eros blandit, porttitor nisi. Praesent auctor nunc odio, sit amet bibendum mauris cursus eu. Maecenas vestibulum quam eu augue aliquet, vitae posuere massa lacinia. In sit amet risus nec tellus vulputate efficitur vel et nibh. Nam vulputate arcu at libero varius, non porttitor justo sollicitudin. Pellentesque posuere laoreet pharetra. Aliquam dignissim varius magna, quis volutpat risus consectetur vitae. Nam sagittis tincidunt suscipit. Phasellus odio ante, aliquet et scelerisque molestie, convallis id leo. Maecenas id imperdiet massa. Vivamus vestibulum turpis in ultricies cursus. Fusce velit eros, lobortis nec aliquet et, ullamcorper ac justo. Duis at bibendum arcu. Vivamus pulvinar nibh vel libero convallis varius. Etiam in augue a mi sagittis semper.
</p>
<p>Nam hendrerit egestas nibh. Fusce ut nisl condimentum, laoreet est tristique, luctus ex. Morbi pharetra vel odio quis iaculis. Nunc ornare sit amet est nec blandit. Nullam quam turpis, facilisis tempor finibus ut, condimentum ut lacus. Aliquam egestas est vitae risus euismod, eu venenatis massa interdum. Nam rutrum, lacus at volutpat maximus, metus augue tincidunt ante, ac luctus augue magna eu odio. Proin magna diam, lobortis non egestas at, eleifend eget ligula. Nullam viverra sit amet quam sed iaculis. Integer malesuada viverra diam, rutrum dictum elit imperdiet ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer fermentum eget sapien sit amet pharetra. Etiam venenatis pretium purus, scelerisque rutrum nunc semper vel. Pellentesque condimentum fringilla nisi id laoreet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
<p>Maecenas venenatis ipsum quis ornare congue. Nunc pretium suscipit leo, et facilisis risus pulvinar at. Donec dictum arcu sit amet turpis faucibus malesuada. Sed molestie justo vel turpis efficitur, in facilisis diam mollis. Suspendisse et dolor porttitor, lacinia felis ac, tristique lectus. Suspendisse ut lectus augue. Integer euismod, eros et ornare mollis, enim eros vulputate erat, ac aliquet eros mi ut lacus. Pellentesque dapibus ac sapien vitae iaculis. Mauris sit amet felis faucibus, dictum mi et, fermentum dui. Sed sed blandit erat. Nunc in posuere magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum orci metus, finibus vitae arcu in, sagittis gravida tortor.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras urna orci, venenatis ultricies varius vitae, rutrum a elit. Aliquam imperdiet rhoncus nisl. Mauris sed lacus ut purus porttitor pretium. Morbi pharetra leo et sagittis placerat. Sed ut neque diam. Donec congue nisi et odio iaculis, at lobortis magna pulvinar. Curabitur a dapibus sem, nec placerat libero. Ut rutrum accumsan ornare. Sed varius nisi ipsum, eget fringilla tellus fermentum vitae. Proin ut urna vitae quam feugiat imperdiet. Nunc rhoncus, lectus ut tempor commodo, sem lectus ornare dui, et feugiat lorem dolor eu mi. Etiam nec orci orci. Fusce scelerisque egestas dolor, nec iaculis orci sollicitudin quis.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque vehicula vestibulum quam a mollis. Pellentesque fermentum lacus id ex interdum, eu tempus quam suscipit. Mauris viverra orci eget nulla mattis, sit amet sollicitudin dolor sagittis. Quisque tempor vitae diam non interdum. Nunc elit lectus, lacinia vel arcu nec, ultricies semper arcu. Nullam ac consectetur nibh. Aliquam in urna porttitor, hendrerit diam et, viverra ipsum. Mauris facilisis tellus at dui imperdiet bibendum. Maecenas diam ante, efficitur eu metus sed, pretium luctus risus. Praesent porttitor aliquam nunc, at tempor eros fringilla in. Nullam pretium, nulla at cursus hendrerit, purus nisl ultricies neque, ac ornare erat nulla ac mi. Vestibulum sodales scelerisque tristique. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Morbi tempus, libero vel egestas dictum, tellus nibh vulputate orci, in porta elit tortor in tortor. Nulla molestie finibus orci at laoreet. Nulla facilisi. Pellentesque dapibus quis lacus quis molestie. Donec at ipsum justo. Nam ornare hendrerit est a pretium. Quisque fringilla odio et urna efficitur, in venenatis mauris varius. Quisque cursus fermentum nibh, blandit vehicula felis mollis a. Ut sollicitudin porttitor dignissim. Fusce eu lacus molestie, lobortis ante sit amet, aliquet nunc. Proin posuere iaculis purus, id iaculis leo efficitur non. Proin nec ligula eget est sollicitudin volutpat quis vitae augue. Ut ultricies volutpat lacus eget dignissim. Donec bibendum tellus vitae justo consequat, in consequat dui fringilla. Pellentesque ultrices, sapien sit amet ultrices fringilla, nisi dolor consectetur lectus, at vestibulum ante ipsum euismod dui.</p>
<p>Donec rutrum interdum interdum. Etiam aliquam, ex ut ullamcorper egestas, nisi purus luctus libero, eu ornare elit mi eget velit. Cras venenatis ut lectus id porta. In ac orci libero. Vivamus vel justo turpis. In hac habitasse platea dictumst. Nulla a semper elit. Cras at gravida lorem. Praesent tincidunt sapien nibh, eget fermentum ipsum pellentesque eu. Duis vel malesuada quam. Aenean auctor urna vulputate nibh vestibulum convallis. In hendrerit enim vel feugiat facilisis. Sed in risus molestie, varius ligula sit amet, viverra est. Sed egestas nisi nec dictum ornare. Mauris non enim mollis, scelerisque augue eu, volutpat orci.</p>
<p>Fusce at auctor quam. Curabitur non sagittis neque, id laoreet lorem. Duis ultrices tristique felis sed viverra. Fusce non elit sed nunc imperdiet hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ut purus euismod, egestas purus quis, elementum sapien. Nam laoreet ligula lectus, ut consequat metus rutrum sit amet. Maecenas nulla est, cursus sit amet felis quis, euismod eleifend ligula. Suspendisse eu est quis lacus aliquam ultricies at sit amet urna. Suspendisse potenti. Aenean quis diam leo.</p>
<p>Sed eu lectus vitae elit efficitur malesuada a vel nibh. Donec non iaculis dui, et facilisis est. Suspendisse efficitur aliquam lacus at molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dolor velit, lacinia nec pellentesque in, convallis et velit. Curabitur et interdum erat. Duis imperdiet id leo nec semper. Sed laoreet congue dolor, et pharetra lacus pharetra nec. Aenean fringilla, leo vel tristique cursus, nisl nibh lobortis lacus, quis efficitur ante sapien sed lectus. Phasellus volutpat condimentum lorem vitae convallis. Curabitur tempus elit non odio posuere, et ultricies sapien rutrum. Proin eget vehicula nisi. </p>

<button data-bind="click:popupModel.show">show popup</button>

script.js

ko.components.register(
  "popup",
  {
    viewModel:{
      createViewModel:function (params, componentInfo){
        var originalElement = componentInfo.element;
        $(originalElement).addClass("popupComponent");
        var vm = new (function(){
          var self = this;
          if(params.popupModel){
            params.allowBackgroundDismiss = params.popupModel.allowBackgroundDismiss;
            params.visible = params.popupModel.visible;
            params.onDismiss = params.popupModel.onDismiss;
            
          }
          var allowBackgroundDismiss = typeof params.allowBackgroundDismiss === "function"
                                          ? params.allowBackgroundDismiss
                                          : ko.observable(params.allowBackgroundDismiss === true 
                                                          || params.allowBackgroundDismiss === false
                                                              ? params.allowBackgroundDismiss
                                                              : true);
          this.backgroundDismiss = function(){
            if(allowBackgroundDismiss()){
              self.visible(false);
            }
          }
          this.visible = typeof params.visible === "function"
                          ? params.visible
                          : ko.observable(params.visible === true 
                                          || params.visible === false
                                              ? params.visible
                                              : false);
          this.data = params.data;
          var onDismiss = typeof params.onDismiss === "function"
                            ? params.onDismiss
                            : this.data && this.data.onDismiss && typeof this.data.onDismiss === "function"
                                ? this.data.onDismiss
                                : null;
          if(onDismiss){
            var sub = this.visible.subscribe(function(v){
              if(!v){
                //specific test for non-coerced false, so don't "optimize".
                var shouldDismiss = !(onDismiss() === false); 
                if(!shouldDismiss){
                  self.visible(true);
                }
              }
            });
            this.dispose = function(){
              sub.dispose();
            };
          }
        });
        return vm;
      }},
    template:"<!-- ko if:visible --><div class='popupComponentDismisser' data-bind='click:backgroundDismiss,clickBubble:false'><div class='popupComponentContent' data-bind='click:function(){},clickBubble:false'><!-- ko template:{nodes:$componentTemplateNodes, data: data||$parent} --><!-- /ko --></div></div><!-- /ko -->",
    synchronous:true
  });
function PopupModel(){
  var self = this;
  this.visible = ko.observable(false)
  this.show = function(){
    self.visible(true);
  }
  this.hide = function(){
    self.visible(false);
  }
  this.onDismiss = function(){
    console.log("popup dismissed");
    //return false to prevent dismiss
    //return false;
  }
  this.allowBackgroundDismiss = false;
}
ko.applyBindings({
  popupModel : new PopupModel()
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>

style.css

popup{
  //this is for all popups
  @popup-padding:16px;
  .popupComponentDismisser{
    position:fixed;
    z-index:5000;
    width:100vw;
    height:100vh;
    top:0;
    left:0;
    background-color:rgba(0,0,0,.5);
  }
  .popupComponentContent{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: @popup-padding;
    max-height:100vh;
    max-width:100vw;
    box-sizing:border-box;
  }
  .popupComponentContent:after {
    content: "";
    display: block;
    height: @popup-padding;
    width: 100%;
  }
  //this is styling for all popups
  .popupComponentContent{
    background-color:white;
    box-shadow: 2px 2px 5px 4px rgba(0,0,0,0.5);
    overflow:auto;
  }
  //this is to set the size of a specific class of popup, here it is .warning
  &.warning .popupComponentContent{
    width:400px;
    height:200px;
  }
}