📜  语义UI |弹出

📅  最后修改于: 2021-08-30 09:49:00             🧑  作者: Mango

Semantic UI 是一个开源框架,它使用 CSS 和 jQuery 来构建出色的用户界面。它与使用的引导程序相同,并且有很多不同的元素可以用来使您的网站看起来更加惊人。它使用一个类向元素添加 CSS。

pop 用于在页面顶部显示一些内容。

语法: jQuery 代码

$('.button').popup();

示例 1:此示例在鼠标移动时显示弹出消息。



  

    Semantic UI
  
    
  
    
  
    

  

    
        
            Hover Me         
    
          

输出:

如果我们没有在 popup()函数指定属性,那么它会在悬停时弹出。

示例 2:

此示例显示一个弹出菜单。

jQuery代码:

$('.menu .browse').popup({
   hoverable: true,
});

Hoverable 属性设置为 true 以将鼠标悬停在弹出菜单上。如果我们不使用此属性,它将为 false 并且无法将鼠标悬停在弹出菜单上。

完整代码:



  

    Semantic UI
    
  
    
  
    

  

    
             
          

输出:

示例 3:

此示例在单击按钮后显示弹出消息。

jQuery代码:

$('.button').popup({
   on: 'click'
});

完整代码:



  

    Semantic UI
  
    
  
    
      
    

  

    
        
            Click Me         
    
          

输出:

示例 4:

此示例在输入字段中显示弹出消息。

jQuery代码:

$('input').popup({
   on: 'focus'
});

on: 'focus'是因为我们只想在用户关注该输入字段时显示弹出窗口。

完整代码:



  

    Semantic UI
    
  
    
      
    

  

    
        
                                  
    
              

输出:

示例 5:

目标元素 – 在其他地方显示弹出窗口。

jQuery代码:

$('.button').popup({
  position : 'right center',
  target   : '.image',
  title    : 'Geeksforgeeks',
  content  : 'A Computer Science Portal'
});
  • 位置:要显示弹出窗口的位置。
  • 目标:当鼠标悬停在 .button 上时,你想在哪个元素上显示弹出窗口。
  • 标题和内容:它显示在弹出窗口中。

完整代码:



  

    Semantic UI
    
  
    
      
    

  

    
        
Hover Me
        For more detail of Picture         
             
              

输出: