728x90
반응형
SMALL
php를 이용해서 a링크를 누르면 팝업창이 가운데로 고정되서되게끔 해주는 방법이 있는데요~
css나 부트스트랩을 사용할때 효과적일 수 있습니다~!!
요즘 반응형웹을 많이 사용하시죠?? 그때 아주 광효과를 보여줄겁니다!!ㅋㅋㅋ
일단 header에 관련된 소스와 팝업창 관련소스를 살펴보시죠~
- index.php(a링크 관련)
<header id="site-header" class="header-footer-group" role="banner">
<div class="header-inner section-inner">
<div class="header-titles-wrapper">
<button class="toggle search-toggle mobile-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false">
<span class="toggle-inner">
<span class="toggle-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23"><path d="M38.710696,48.0601792 L43,52.3494831 L41.3494831,54 L37.0601792,49.710696 C35.2632422,51.1481185 32.9839107,52.0076499 30.5038249,52.0076499 C24.7027226,52.0076499 20,47.3049272 20,41.5038249 C20,35.7027226 24.7027226,31 30.5038249,31 C36.3049272,31 41.0076499,35.7027226 41.0076499,41.5038249 C41.0076499,43.9839107 40.1481185,46.2632422 38.710696,48.0601792 Z M36.3875844,47.1716785 C37.8030221,45.7026647 38.6734666,43.7048964 38.6734666,41.5038249 C38.6734666,36.9918565 35.0157934,33.3341833 30.5038249,33.3341833 C25.9918565,33.3341833 22.3341833,36.9918565 22.3341833,41.5038249 C22.3341833,46.0157934 25.9918565,49.6734666 30.5038249,49.6734666 C32.7048964,49.6734666 34.7026647,48.8030221 36.1716785,47.3875844 C36.2023931,47.347638 36.2360451,47.3092237 36.2726343,47.2726343 C36.3092237,47.2360451 36.347638,47.2023931 36.3875844,47.1716785 Z" transform="translate(-20 -31)" /></svg> </span>
<span class="toggle-text">Search</span>
</span>
</button><!-- .search-toggle -->
<div class="header-titles">
<h1 class="site-title" style="font-size:xxx-large; color:#0000a0; text-shadow: -1px 0 white;"><I><a href="http://sky19090.dothome.co.kr">썬더</a></I></h1><div class="site-description">모두가 경험하고 있는 새로운 이동생활 씽씽</div><!-- .site-description -->
</div><!-- .header-titles -->
<button class="toggle nav-toggle mobile-nav-toggle" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle">
<span class="toggle-inner">
<span class="toggle-icon">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="26" height="7" viewBox="0 0 26 7"><path fill-rule="evenodd" d="M332.5,45 C330.567003,45 329,43.4329966 329,41.5 C329,39.5670034 330.567003,38 332.5,38 C334.432997,38 336,39.5670034 336,41.5 C336,43.4329966 334.432997,45 332.5,45 Z M342,45 C340.067003,45 338.5,43.4329966 338.5,41.5 C338.5,39.5670034 340.067003,38 342,38 C343.932997,38 345.5,39.5670034 345.5,41.5 C345.5,43.4329966 343.932997,45 342,45 Z M351.5,45 C349.567003,45 348,43.4329966 348,41.5 C348,39.5670034 349.567003,38 351.5,38 C353.432997,38 355,39.5670034 355,41.5 C355,43.4329966 353.432997,45 351.5,45 Z" transform="translate(-329 -38)" /></svg> </span>
<span class="toggle-text">Menu</span>
</span>
</button><!-- .nav-toggle -->
</div><!-- .header-titles-wrapper -->
<div class="header-navigation-wrapper">
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style">
<li class="page_item page-item-1"><a href="http://sky19090.dothome.co.kr">HOME</a></li>
</ul>
</nav><!-- .primary-menu-wrapper -->
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style">
<li class="page_item page-item-2"><a href="#intro">INTRO</a></li>
</ul>
</nav><!-- .primary-menu-wrapper -->
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style">
<li class="page_item page-item-3"><a href="#solution">SOLUTION</a></li>
</ul>
</nav><!-- .primary-menu-wrapper -->
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style">
<li class="page_item page-item-4"><a href="#guide">GUIDE</a></li>
</ul>
</nav><!-- .primary-menu-wrapper -->
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style">
<li class="page_item page-item-5"><a href="#company">COMMU</a></li>
</ul>
</nav><!-- .primary-menu-wrapper -->
<nav class="primary-menu-wrapper" aria-label="Horizontal" role="navigation">
<ul class="primary-menu reset-list-style">
<li class="page_item page-item-6"><a href="#" onclick="showPopup();">LOGIN / SIGN UP</a></li>
</ul>
</nav><!-- .primary-menu-wrapper -->
<div class="header-toggles hide-no-js">
<div class="toggle-wrapper search-toggle-wrapper">
<button class="toggle search-toggle desktop-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false">
<span class="toggle-inner">
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23"><path d="M38.710696,48.0601792 L43,52.3494831 L41.3494831,54 L37.0601792,49.710696 C35.2632422,51.1481185 32.9839107,52.0076499 30.5038249,52.0076499 C24.7027226,52.0076499 20,47.3049272 20,41.5038249 C20,35.7027226 24.7027226,31 30.5038249,31 C36.3049272,31 41.0076499,35.7027226 41.0076499,41.5038249 C41.0076499,43.9839107 40.1481185,46.2632422 38.710696,48.0601792 Z M36.3875844,47.1716785 C37.8030221,45.7026647 38.6734666,43.7048964 38.6734666,41.5038249 C38.6734666,36.9918565 35.0157934,33.3341833 30.5038249,33.3341833 C25.9918565,33.3341833 22.3341833,36.9918565 22.3341833,41.5038249 C22.3341833,46.0157934 25.9918565,49.6734666 30.5038249,49.6734666 C32.7048964,49.6734666 34.7026647,48.8030221 36.1716785,47.3875844 C36.2023931,47.347638 36.2360451,47.3092237 36.2726343,47.2726343 C36.3092237,47.2360451 36.347638,47.2023931 36.3875844,47.1716785 Z" transform="translate(-20 -31)" /></svg> <span class="toggle-text">Search</span>
</span>
</button><!-- .search-toggle -->
</div>
</div><!-- .header-toggles -->
</div><!-- .header-navigation-wrapper -->
</div><!-- .header-inner -->
<div class="search-modal cover-modal header-footer-group" data-modal-target-string=".search-modal">
<div class="search-modal-inner modal-inner">
<div class="section-inner">
<form role="search" aria-label="Search for:" method="get" class="search-form" action="http://sky19090.dothome.co.kr/">
<label for="search-form-1">
<span class="screen-reader-text">Search for:</span>
<input type="search" id="search-form-1" class="search-field" placeholder="Search …" value="" name="s" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>
<button class="toggle search-untoggle close-search-toggle fill-children-current-color" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false">
<span class="screen-reader-text">Close search</span>
<svg class="svg-icon" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><polygon fill="" fill-rule="evenodd" points="6.852 7.649 .399 1.195 1.445 .149 7.899 6.602 14.352 .149 15.399 1.195 8.945 7.649 15.399 14.102 14.352 15.149 7.899 8.695 1.445 15.149 .399 14.102" /></svg> </button><!-- .search-toggle -->
</div><!-- .section-inner -->
</div><!-- .search-modal-inner -->
</div><!-- .menu-modal -->
</header><!-- #site-header -->
- index.php(팝업창 관련)
<script language="javascript">
function showPopup() {
let width = 600;
let height = 450;
let top = (window.innerHeight - height) / 2 + screenY;
let left = (window.innerWidth - width) / 2 + screenX;
let spec = 'status=no, menubar=no, toolbar=no, resizable=no';
spec += ', width=' + width + ', height=' + height;
spec += ', top=' + top + ', left=' + left;
window.open('/login.php', 'popup', spec);
}
</script>
여기서 LOGIN / SIGN UP이라 되있는 링크로된 스크립트가 있는데요~
이것을 눌러보면 팝업창이 가운데로 고정되서 뜨는 것을 확인할 수 있습니다~
자 이렇게 가운데로 뜨면 되지요~
위에는 회사정보라 그림판으로 쓱쓱 지워봤어요~ㅎㅎㅎ
728x90
반응형
LIST
'IT 관련,, > 중요문자 적어두기' 카테고리의 다른 글
| [WEB/PHP] 이클립스 PHP 파일 인코딩 바꾸기!! (0) | 2021.07.10 |
|---|---|
| [WEB/PHP] php를 사용한 자바스크립트에서 exit(0)를 사용해보자!! (0) | 2021.05.19 |
| [WEB/PHP] input창으로 글자타이핑효과를 내보잠~!! (0) | 2021.01.18 |
| [개발/WebSocket] 웹소켓 채팅프로그램에 대한 간단내용정리~!!! (0) | 2021.01.03 |
| [web/개발] 이클립스 close project기능을 알아보자~!! (0) | 2021.01.02 |