Javascript модал с использованием класса, который можно использовать в качестве шаблона для нескольких кнопок на одной странице - PullRequest
Новая
       21

Javascript модал с использованием класса, который можно использовать в качестве шаблона для нескольких кнопок на одной странице

0 голосов
/ 11 ноября 2018

Я пытаюсь закодировать проект, который я создал с помощью Adobe Muse, предыдущий проект можно найти здесь .
На этой странице, когда вы нажимаете на каждую из круглых кнопок, вы получаете всплывающее окновверх / модальное поле с текстом.

В идеале я хотел бы создать всплывающий / модальный javascript, как мой предыдущий дизайн, но как шаблон, который использует «класс» и «.this», так что я могу использовать этот код через тридцать илитак что кнопки есть на странице.Я не совсем нашел то, что искал, поскольку все, что я нашел, использует в качестве «идентификаторов» и является примером для одной кнопки.

Это - главное дерево, а здесь - это файлы .js, это то, что у меня есть.

Буду признателен за любую помощь или идеи, спасибо!

1 Ответ

0 голосов
/ 11 ноября 2018

на теге может иметь несколько классов. Вы должны использовать это. 

<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>

право

если вы хотите использовать hover, может быть, проще. 

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

arg 1 - функция для наведения, arg 2 - функция для выхода из режима наведения

...