📜  引导程序中的弹出窗口与示例

📅  最后修改于: 2021-05-25 17:26:39             🧑  作者: Mango

引导程序弹出窗口是引导程序中的一个属性,可用于使任何网站看起来更加动态。弹出框通常用于显示有关任何元素的附加信息,并在该元素上单击鼠标指针时显示。在弹出窗口中,如果单击脚本中包含的任何元素,它将以弹出窗口形式显示特定消息,并且您可以在脚本中定义时看到消息。

使用Bootstrap在网站上实现弹出窗口很容易,因为您只需要为元素定义一些属性,如下所述:

语法

data-toggle="popover" 
title="Popover Header" 
data-content="Some content inside the box"

data-toggle属性定义Popover, title属性定义Popover的Tile,而data-content属性用于存储要在相应Popover中显示的内容。

在您的代码中包含以下javascript以使其正常工作。


例子:




    Bootstrap Example
    
    
    
    
    

  

    
      

Popover Example

      GeeksforGeeks     
           

输出:

Bootstrap中不同类型的Popover方向

  • 顶部对齐:在这种类型的弹出框对齐方式中,弹出框内容显示在我们应用此属性的元素的顶部。要将弹出窗口与顶部对齐,请分配一个属性data-placement =“ top”
    
    
    
        Bootstrap Example
        
        
        
        
        
    
      
    
        
          

    Popover Example

               
               

    输出:

  • 左对齐:在这种类型的弹出框对齐方式中,弹出框内容显示在我们应用此属性的元素的左侧。要将弹出窗口与顶部对齐,请分配一个属性data-placement =“ left”
    
    
    
        Bootstrap Example
        
        
        
        
        
    
      
    
        
          

    Popover Example

               
               

    输出:

  • 右对齐:在这种类型的弹出框对齐方式中,弹出框内容显示在我们应用此属性的元素的顶部。要将弹出窗口与顶部对齐,请分配一个属性data-placement =“ right”
    
    
    
        Bootstrap Example
        
        
        
        
        
    
      
    
        
          

    Popover Example

               
               

    输出:

  • 底部对齐:在这种类型的弹出框对齐方式中,弹出框内容显示在我们应用此属性的元素的底部。要将弹出窗口与顶部对齐,请分配一个属性data-placement =“ bottom”
    
    
    
        Bootstrap Example
        
        
        
        
        
    
      
    
        
          

    Popover Example

               
               

    输出: