Easy editable, lite and free javascript popups!
If you want customize all popups. Follow steps.
Clone Project and change folder
$ git clone https://github.com/muhammedikinci/poporigin
$ cd poporiginInstall npm dependencies
$ npm installPackage Json has a two run-scripts, first script -> run project in dev mode with watch webpack
$ npm run dev:watchSecond script -> just build project
$ npm run buildGo 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.
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
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']
};
For popup 1 -> http://toptimal.xyz/popup1/
For popup 2 -> http://toptimal.xyz/popup2/
- Muhammmed İKİNCİ
This project is licensed under the MIT License - see the LICENSE.md file for details
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent