본문 바로가기

퍼블리셔(프론트)/js12

자바스크립트로 모바일 기기(아이폰/안드로이드) 구분하기 var currentOS; var mobile = (/iphone|ipad|ipod|android/i.test(navigator.userAgent.toLowerCase())); if (mobile) { // 유저에이전트를 불러와서 OS를 구분합니다. var userAgent = navigator.userAgent.toLowerCase(); if (userAgent.search("android") > -1) currentOS = "android"; else if ((userAgent.search("iphone") > -1) || (userAgent.search("ipod") > -1) || (userAgent.search("ipad") > -1)) currentOS = "ios"; else currentO.. 2020. 6. 29.
onclick 을 활성화 하기위한 환경(기본상식) 샘플코드기능 : 클립보드 텍스트 복사 Copy text function myFunction() { /* Get the text field */ var copyText = document.getElementById("myInput"); /* Select the text field */ copyText.select(); /* Copy the text inside the text field */ document.execCommand("copy"); /* Alert the copied text */ alert("Copied the text: " + copyText.value); } 이거로 오늘 삽질만 30분 했던거같다.. button을 클릭했을때 이벤트를 발생하기 위한 함수가 정의되어 있는데, onclick을 .. 2020. 6. 24.
magnificPopup 레이어팝업 모바일 스크롤 방지 js, css JS: $('.my-popup').magnificPopup({ type : 'ajax', callbacks: { beforeOpen: function() { $('body').addClass('mfp-active'); }, beforeClose: function() { $('body').removeClass('mfp-active'); } } }); CSS: body { -webkit-overflow-scrolling: touch; } body.mfp-active { overflow: hidden; -webkit-overflow-scrolling: auto; width: 100%; position: fixed; overflow: auto; } body .mfp-wrap { position: fixed; o.. 2020. 5. 4.
javascript modal 모달창을 처음으로 해보았는데.. 1. html 구성 모달창열기 2. js 구성(modal popup 불러오기) $(".click_pop").click(function(e){ e.preventDefault(); var target = $(this).attr("href"); $("#clientEditorModal .modal-content").load(target, function() { $("#clientEditorModal").modal("show"); }); }); ※ 위 과정을 거치면 modal.html로 되어있던 페이지가 modal 창 내부에 load 되면서 페이지 속 페이지?의 개념으로 구성할수가 있다. key값하나만 넘겨주고 modal.html 내부에서 데이터를 지지고 볶고.. 그리고 만들어주면.. 2019. 9. 6.