{"id":20455272,"url":"https://github.com/alexmhack/web_modals","last_synced_at":"2026-05-28T21:31:27.908Z","repository":{"id":114089816,"uuid":"143158605","full_name":"Alexmhack/web_modals","owner":"Alexmhack","description":null,"archived":false,"fork":false,"pushed_at":"2018-08-01T14:31:24.000Z","size":1297,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-04-08T02:14:17.172Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alexmhack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2018-08-01T13:17:58.000Z","updated_at":"2023-08-27T01:37:49.000Z","dependencies_parsed_at":"2023-06-12T13:45:38.797Z","dependency_job_id":null,"html_url":"https://github.com/Alexmhack/web_modals","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Alexmhack/web_modals","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2Fweb_modals","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2Fweb_modals/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2Fweb_modals/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2Fweb_modals/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alexmhack","download_url":"https://codeload.github.com/Alexmhack/web_modals/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alexmhack%2Fweb_modals/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33627934,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-28T02:00:06.440Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-15T11:18:24.675Z","updated_at":"2026-05-28T21:31:27.902Z","avatar_url":"https://github.com/Alexmhack.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# web_modals\nenabling modals in website\n\n# Project Objective\nEvery website has cookies system, and website has to show an notification about the cookies policy\nthat website uses for its users so for that, website shows the notification about the cookies\npolicy once on any page that tha user has visited and not every time the page reloads and also\nnot on a certain page but on each page that website has but only once.\n\nWe can accomplish this objective using the lessons we learned in the brandflow about the page url,\nwe can set the starting of the page url and then show our new users the cookie policy once on each\nurl of our website.\n\n# Creating cookie modal\nGoto sidenav \u003e modals \u003e lists. Click on add button and name our modal Cookie modal and select Show\nonly once, this is obvious because we want to show our modal only once. Paste the code from\ncookie_info.html and paste in the code section of our modal, save the modal.\n\n# Creating trigger\nOnce our modal is created we need a condition for triggering the modal, the condition is simply \nthe new user condition which has page url for localhost, save and publish changes.\n\n# Testing\nRefresh the browser and you will see the cookie button and info, refresh the browser again, this \ntime you will not see the cookie bar.\n\n# Creating scroll condition\nIf a user visites your website and starts reading article, then we would want to suggest him more \narticles that are related to the current one but only if the user has shown interest in that \ncurrent article, this thing can be achieved with scroll condition\n\nIf the user has scrolled more than 60% of the article than we will show him more articles.\n\nGoto automation \u003e condition and then create a new rule named Scroll 60% condition and select type \n= Scroll % equals 60 and then save.\n\n# Creating related article modal\nGoto modals \u003e lists. Create new modal named Related article modal and paste the related_\narticle.html code in the code section and save it \u003e add trigger and select condition to scroll \n60% \u003e save \u003e publish changes.\n\n# Creating time delay condition\nMany users just scroll down the page very quickly finding the thing they want in the article and\nnot read the whole article for that we can set the time spent by the user on the website.\n\nWe create the Delay time condition from automation \u003e condition \u003e new rule \u003e Delay 20 condition \u003e \ntype: Delay time = 20 \u003e \"Do something if user spents 20 seconds on the page\".\n\nAdd the trigger to the modal Delay 20 and save it.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmhack%2Fweb_modals","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexmhack%2Fweb_modals","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexmhack%2Fweb_modals/lists"}