googleを見たことがある人は、「サークルに追加」ボタンをホバーすると自動的にモーダルが表示されますあなたのすべてのサークルがチェックボックスに入っているボックスタイプのdivで、目的のものをクリックするだけです。ボタンをクリックしてgoogleのようなモーダルボックスのオプションを取得する
は、css/jqueryを使用してこれを行う方法の例です...またはそれに似たようなものでしょうか？
または何らかの説明で、どうすればよいですか？ここで
が行う方法の一例です。
<!DOCTYPE HTML>
<html>
<head>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
var aa;
$(document).ready(function() {
$(".addContainer").mouseenter(function() {
$(".addCircles").animate({height : 200});
});
$(".addContainer").mouseleave(function() {
$(".addCircles").animate({height : 0});
});
$(".addCircles input[type=checkbox]").change(function(e){
alert($(this).attr("id")+": "+($(this).attr("checked") == "checked" ? "checked" : "unchecked"));
});
});
</script>
</head>
<body>
<div class="addContainer" style="position: relative; width: 120px;">
<div class="add" style="cursor: pointer;">Add to Circles</div>
<div class="addCircles" style="height: 0; position: absolute; overflow: hidden;">
<ul style="list-style: none;">
<li><input type="checkbox" id="circle1" />Circle 1</li>
<li><input type="checkbox" id="circle2" />Circle 2</li>
<li><input type="checkbox" id="circle3" />Circle 3</li>
</ul>
</div>
</div>
</body>
</html>