Question

我正在尝试对使用Adobe Muse创建的项目进行编码，可以在here中找到先前的项目。
在该页面上，当您单击每个圆形按钮时，会出现一个弹出/模态框，其中包含一些文本。

理想情况下，我想像以前的设计一样创建一个javascript弹出/模态，但作为使用'class'和'.this'的模板，因此我可以在其中的三十多个按钮中使用该代码在页面上。我还没有完全找到自己想要的东西，因为我发现的所有东西都用作“ ID”，并且只是一个按钮示例。

This是主要树，here是.js文件，到目前为止，这是我所拥有的。

我将不胜感激，谢谢！

Answer 1

标签上的

可以具有多个类。您应该使用它。

<button class="template other_class1 other_class2" />

<button class="template other_class1 other_class2" />

这用空格隔开。

并且，id属性在一个html文档中应该是唯一的。这是理想的。

//编辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
</head>
<body>
haha
<button class="modal" id="button1">button1</button>
<button class="modal" id="button2">button2</button>
<button class="modal" id="button3">button3</button>

<div class="button1_modal" style="width: 200px; height: 200px; border: 1px solid red; display: none;">
    modal1
</div>
<div class="button2_modal" style="width: 200px; height: 200px; border: 1px solid blue;  display: none">
    modal2
</div>

<div class="button3_modal" style="width: 200px; height: 200px; border: 1px solid green;  display: none">
    modal3
</div>

</body>
</html>

<script>
    $(".modal").click(function(){
        var _button = $(this).attr('id');
        var isOpen = $("."+_button+"_modal").css('display') === 'block';
        if(isOpen){
            $("."+_button+"_modal").css('display', 'none');
        }else{
            $("."+_button+"_modal").css('display', 'block');
        }

    })
</script>

对吗？

如果要使用悬停功能，则可能更简单。

<script>
$(".modal").hover(function(){
    $("."+ $(this).attr('id')+"_modal").css('display', 'block');
},function(){
    $("."+ $(this).attr('id')+"_modal").css('display', 'none');
})
</script>

arg 1用于悬停，arg 2用于悬停

Javascript modal using类，可以用作单个页面上多个按钮的模板

1 个答案: