クリック後に全画面divをポップアップ

Question

アイコンをクリックした直後にメインページ内の全ページ（100vh）を直接表示するdivを表示したいと考えています。

私はそれをマウスカーソル（またはアイコン）から表示したいので、CSSでのみ作成したいと思っていましたが、おそらく私はいくつかのjQueryも必要になるでしょうか？

私のアイコンをクリックすると、ズームインのようにマウスカーソルからdivがポップアップし、トランジションアニメーションは過酷に見えなくなります。 また、ポップアップウィンドウを閉じて一般状態に戻すこともできます。すべて同じ画面で、再読み込みはありません。

私がしたいだけで、CSSでそれを行っているだろうが、それはjQueryを使ってのみ可能である場合、私はイメージが時々言葉よりも優れているので、私はあなたが理解するための小型のビジュアルなさすぎ

をそれを取るでしょう。

可能ですか？あなたは

Answer 1

私は、コードを更新感謝。開始する例を与えるだけで、それらの関数はすべてjQueryで見つけることができますので、時間をかけてください。ここで

//init 
 
$('#myDiv').on('click', handleClick); 
 

 
$('#myDiv').click(function(e) { 
 
    if ($('#myDiv').hasClass('fullscreen')) { 
 
    $('#myDiv').off('click', handleClick); 
 
    } else { 
 
    $('#myDiv').on('click', handleClick); 
 
    } 
 
}); 
 

 
//handle the 'X' to close 
 
$('.close-icon').on('click', function() { 
 
    $('#myDiv .close-icon').hide(); 
 
    $('#myDiv .contentContainer').html('CLICK!'); 
 
    $('#myDiv').removeClass('fullscreen'); 
 
}); 
 

 
function handleClick() { 
 
    $('#myDiv').addClass('fullscreen'); 
 
    $('#myDiv .close-icon').show(); 
 
    // delay 1s then change the html inside 
 
    $('#myDiv .contentContainer').delay(1000) 
 
    .queue(function(n) { 
 
     $(this).html('<div class="popcontainer">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>'); 
 
     n(); 
 
    }); 
 

 
}

html, 
 
body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#myDiv.fullscreen { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: fixed; 
 
    transition: 1s ease-in-out; 
 
    cursor: auto; 
 
    z-index: 0; 
 
} 
 

 
#myDiv { 
 
    background: aqua; 
 
    width: 80px; 
 
    height: 80px; 
 
    transition: 1s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 
.centered { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100vh; 
 
    width: 100vw; 
 
} 
 

 
.close-icon { 
 
    float: right; 
 
    margin: 30px; 
 
    cursor: pointer; 
 
    display: none; 
 
    z-index: 100; 
 
} 
 

 
.popcontainer { 
 
    margin: 20px; 
 
    padding: 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="centered"> 
 
    <div id="myDiv"> 
 
    <span class="close-icon">&#10006;</span> 
 
    <div class="contentContainer"> 
 
     CLICK! 
 
    </div> 
 
    </div>

Answer 2

、私はそれはあなたを助け願っています。マウス/ターゲットdivには従いませんが。実際には、mousemove関数を（以下のコードで）追加してモーダル/ポップアップdivをターゲットのクリック位置に設定し、アニメーションを上に設定します：0pxと左に0pxでフルスクリーンポップアップを固定します。ズームインが中心から来ていないと、アニメーションはスムーズにならないでしょう。

var mouseX; 
var mouseY; 
$(document).mousemove(function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
}); 

$('#open-modal').click(function() { 
 
    $('.your-modal').show(); 
 
    $('.your-modal').removeClass('animated zoomOut').addClass('animated zoomIn'); 
 
}); 
 

 
$('.close-button').click(function() { 
 
    $('.your-modal').removeClass('animated zoomIn').addClass('animated zoomOut').delay(800).fadeOut(400); 
 
});

#open-modal { 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    position: absolute; 
 
} 
 

 
.your-modal { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: 1111111; 
 
    display: none; 
 
    background: #ffa0a0; 
 
} 
 

 
.close-button { 
 
    position: fixed; 
 
    z-index: 111111111; 
 
    top: 20px; 
 
    right: 20px; 
 
    width: 50px; 
 
    height: 50px; 
 
    background: #ffffff; 
 
    border-radius: 50%; 
 
} 
 

 
.animated { 
 
    animation-duration: 1s; 
 
    animation-fill-mode: both; 
 
} 
 

 
@keyframes zoomIn { 
 
    from { 
 
    opacity: 0; 
 
    transform: scale3d(.3, .3, .3); 
 
    } 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.zoomIn { 
 
    animation-name: zoomIn; 
 
} 
 

 
@keyframes zoomOut { 
 
    from { 
 
    opacity: 1; 
 
    } 
 
    50% { 
 
    opacity: 0; 
 
    transform: scale3d(.3, .3, .3); 
 
    } 
 
    to { 
 
    opacity: 0; 
 
    display: none!important; 
 
    } 
 
} 
 

 
.zoomOut { 
 
    animation-name: zoomOut; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="open-modal">Click Here!</a> 
 

 
<div class="your-modal"> 
 
    <div class="close-button"></div> 
 
    Text Here 
 

 

 
</div>