HTML-тип всплывающего окна Semantic-UI

Semantic UI — это интерфейсный фреймворк, созданный с помощью less и jQuery. Он используется для создания отзывчивых и привлекательных веб-интерфейсов. В этой статье мы увидим HTML-тип всплывающего окна Semantic UI.

Всплывающий модуль Semantic UI используется для отображения дополнительной информации об элементе. Всплывающее окно типа HTML может указывать HTML-код, который будет использоваться в качестве содержимого всплывающего окна. Содержимое HTML может быть указано как значение атрибута data-html всплывающего модуля.

Атрибуты HTML-типа всплывающего окна Semantic-UI:

data-html: этот атрибут содержит элементы HTML-кода, которые вы хотите отображать при наведении на элемент в виде всплывающего окна.

Синтаксис:

<div class="ui card" data-html="HTML-Code-Here">
    ...
</div>

Пример 1. В приведенном ниже примере показано, как добавить модуль рейтинга в виде HTML-содержимого всплывающего окна.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Semantic-UI Popup HTML Type</title>

    <link rel="stylesheet"

          href=

"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

    <script src=

"https://code.jquery.com/jquery-3.1.1.min.js">

    </script>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">

    </script>

    <style>

        .ui.container {

            text-align: center;

        }

        h3#subheading {

            margin-top: 0px;

            margin-bottom: 30px;

        }

    </style>

</head>

<body>

    <div class="ui container">

        <div>

            <h1 style="color: green">GeeksforGeeks</h1>

            <h3 id="subheading">

              Semantic UI - Popup HTML Type

            </h3>

        </div>

        <div class="ui button"

             data-html="<div class='ui star rating'>

                <i class='active icon'></i>

                <i class='active icon'></i>

                <i class='active icon'></i>

                <i class='active icon'></i>

                <i class='active icon'></i>

            </div>" data-position="bottom center">

            Hover to see rating.

        </div>

    </div>

    <script>

        $(".ui.button").popup();

    </script>

</body>

</html>

Пример 2. В приведенном ниже примере показано использование изображения в качестве содержимого всплывающего окна.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Semantic-UI Popup HTML Type</title>

    <link rel="stylesheet"

          href=

"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

    <script src=

"https://code.jquery.com/jquery-3.1.1.min.js">

    </script>

    <script src=

"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">

    </script>

    <style>

        .ui.container {

            text-align: center;

        }

        h3#subheading {

            margin-top: 0px;

            margin-bottom: 30px;

        }

    </style>

</head>

<body>

    <div class="ui container">

        <div>

            <h1 style="color: green">GeeksforGeeks</h1>

            <h3 id="subheading">

              Semantic UI - Popup HTML Type

            </h3>

        </div>

        <div class="ui button"

             data-position="bottom center"

             data-html='<img height="50"

            width="50"

src="https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png">'>

            Hover to see the image as popup.

        </div>

    </div>

    <script>

        $(".ui.button").popup();

    </script>

</body>

</html>