muhammedikinci / poporigin

Easy editable, lite and free javascript popups!

PopOrigin

Easy editable, lite and free javascript popups!

Getting Started

If you want customize all popups. Follow steps.

Clone Project and change folder

$ git clone https://github.com/muhammedikinci/poporigin
$ cd poporigin

Install npm dependencies

$ npm install

Package Json has a two run-scripts, first script -> run project in dev mode with watch webpack

$ npm run dev:watch

Second script -> just build project

$ npm run build

Change popup

Go to /src/index.js. You can see these lines;

//import { popup } from './popups/popup1';
import { popup } from './popups/popup2';

If you want edit and rebuild popup1, just change these lines, go to /src/popups/popup1.js make changes and build.

How i publish a popup?

As you can see we have an examples folder. If you want to publish a popup, just look at these folders.

 - main.js // custom builded file
 - index.html // example of using width window object
 - btn.svg // and closeButton icon

How I customize popup without a script?

Popup data is kept in the 'window' object. While the popup is being rendered, it reads this object and takes action accordingly.

window.pupdata = {
  appendTargetSelector: 'body', // Which object to add (query selector)
  closeEventOverride: function (selector) { // override click events, if you don't want, just remove
    console.log(selector);
  },
  headline: {
      text: 'Çerez Politikamız',
      fontSize: '28px'
  },
  description: {
      text: 'İnternet sitemizde çerez kullanılmaktadır. Çerezler hakkında detaylı bilgi için <a href="https://google.com">Gizlilik ve Çerez Politikası\'nı</a> inceleyiniz. Devam etmeniz halinde çerez kullanımına izin verdiğinizi kabul edeceğiz. ',
      fontSize: '13px'
  },
  okButton: {
    borderRadius: '5px',
    padding: '10px',
    text: 'Kabul Ediyorum',
    url: 'function'
  },
  exitIntend: false,
  afterSeconds: 0, // how many seconds after will it appear
  colors: {
    color1: '#f7f7f7',
    color2: '#3f3f44',
    color3: '#3f3f44',
  },
  borderRadius : '5px', // popup radius
  padding: '25px', // popup padding
  position: 'TOP_LEFT', // Valid values ['CENTER', 'BOTTOM_LEFT', 'BOTTOM_RIGHT', 'TOP_LEFT', 'TOP_RIGHT'] 
};

Examples in live

For popup 1 -> http://toptimal.xyz/popup1/
For popup 2 -> http://toptimal.xyz/popup2/

Authors

• Muhammmed İKİNCİ

License

This project is licensed under the MIT License - see the LICENSE.md file for details