버튼 클릭 시 팝업 - beoteun keullig si pab-eob

Question

아이디어 창고

목차 Show

아이디어 창고
'HTML'의 다른글

홈
태그
미디어로그
위치로그
방명록

HTML

creat1ve 2017. 5. 22. 16:13

반응형

버튼 클릭시 alert 메세지 팝업 띄우기

반응형

저작자표시비영리변경금지

'HTML' 카테고리의 다른 글

브라우저 사이즈에따라 폰트사이즈 변경 - 반응형웹font-size (0)	2018.04.17
아이프레임 자동 사이즈조절 (0)	2017.05.16
사이드 고정 스크롤배너 (0)	2017.05.15

'HTML'의 다른글

이전글아이프레임 자동 사이즈조절
현재글버튼 클릭시 alert 메세지 팝업 띄우기
다음글이미지 100% 팝업 띄우기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>새창으로 열기</title>
</head>
<body>

<a href="http://www.example.com/" target="_blank">새창으로 열기</a>
<p>

<a href="http://www.example.com/">현재창으로 열기</a>
</p>

<p>현재페이지</p>
<button onclick="location.href='address'">button</button>

<p>새창</p>
<button onclick="window.open('address')">button</button>

<p>팝업으로 열기</p>
<button onclick="window.open('address','window_name','width=430,height=500,location=no,status=no,scrollbars=yes');">button</button>

</body>
</html>

결과물

새창으로 열기

현재창으로 열기

현재페이지

새창

팝업으로 열기

다양한 방법의 링크 입니다.

import React, { useState } from "react";
import "./styles.css";

function App() {
  const [showPopup, setShowPopup] = useState(false);

  const togglePopup = (event) => {
    setShowPopup(event.target.value)
  };

  return (
    <div className="App">
      <h2>Fix me to open Pop Up</h2>
      {/* 버튼을 클릭했을 때 Pop up 의 open/close 가 작동하도록
          button tag를 완성하세요. */}
      <button className="open" onClick ={togglePopup} value = 'false'>Open me</button>
      {showPopup ? (
        <div className="popup">
          <div className="popup_inner">
            <h2>Success!</h2>
            <button className="close"  onClick={togglePopup}>
              Close me
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default App;

방법2

const togglePopup = () => {
    if(showPopup===false){
    setShowPopup(true)
    }else{
    setShowPopup(false)
    }
  };

const togglePopup = () => {
setShowPopup(!showPopup)
};

방법3
const togglePopup = () => {
    setShowPopup(!showPopup)
  };

버튼 클릭시 모달창 자바스크립트 클릭 팝업 자바스크립트 팝업창 Html 팝업 띄우기

버튼 클릭 시 팝업 - beoteun keullig si pab-eob

아이디어 창고

'HTML' 카테고리의 다른 글

'HTML'의 다른글

관련글

결과물

관련 게시물

워드프레스 메뉴 링크 - wodeupeuleseu menyu lingkeu

라디오 버튼 줄 바꿈 - ladio beoteun jul bakkum

CSS 검색 창 테두리 - CSS geomsaeg chang teduli

광고하는

최근 소식

Lg 클립보드 복구 - lg keullibbodeu boggu

세 레비 잡는 법 - se lebi jabneun beob

마세라티 콰트로포르테 풀체인지 - maselati kwateulopoleute pulcheinji

브라질리언 레이저 제모 병원 추천 - beulajillieon leijeo jemo byeong-won chucheon

딸기 씨 키우기 - ttalgi ssi kiugi

스타듀밸리 마우스 오류 - seutadyubaelli mauseu olyu

마우스 자동클릭 설정 - mauseu jadongkeullig seoljeong

갤럭시 A31 단점 - gaelleogsi A31 danjeom

실비 키우기 pc 다운로드 - silbi kiugi pc daunlodeu

식단 조절 없이 근력 운동 - sigdan jojeol eobs-i geunlyeog undong

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의