📌  相关文章
📜  如何打开列表内的不同模式？

📅  最后修改于: 2021-10-29 03:44:19             🧑  作者: Mango

级联样式表是一种与 HTML 和 JavaScript 一起用于构建 Web 应用程序的样式表语言。 CSS 框架提供了一个库，允许更容易、标准化的网页设计。一个这样的 CSS 框架是 Bootstrap 4。Bootstrap 4 是最常用的 CSS 框架，因为它的简单性和内置库提供了设计交互式用户界面所需的大量组件和实用程序。

列表和模态是 Bootstrap 4 中种类繁多的预定义组件之一。模态基于 HTML、CSS 和 JavaScript 的组合。模态位于文档中触发它的父元素之上，可以通过单击模态中存在的关闭选项将其删除。此外，单击模态背景会自动关闭模态。 Bootstrap 4 一次仅支持一种模式。本文重点介绍打开列表内的不同模式。下面的示例演示了从列表项中打开模态。

第一种方法：第一种方法处理包含完全不同内容的模态。在这种情况下，模态必须单独编码。 



  

    
    
    
    

  

  
    
    
    
        
  • 
            Item 1
        
    • 
        
  • 
            Item 2
        
    • 
        
  • 
            Item 3
        
    • 
    

    
    
  
    
  
    

  

输出

  • 单击“item1”时显示以下输出

  • 单击“item2”时显示以下输出

  • 单击“item3”时显示以下输出

第二种方法：第二种方法处理内容几乎相似但差异很小的模态。编写了一个 JavaScript函数来根据需要更改文本。 show.bs.modal事件在列表项的 show 实例方法被调用时立即触发。单击的元素可用作事件的relatedTarget属性。目标元素存储在 ‘li’ 变量中。接下来，目标元素的任何数据值都存储在接收者变量中。当前模态事件存储在模态变量中。该模态变量调用find()方法来查找模态“标题”和模态“正文”并将其替换为所需的文本。 



  

    
    
    
    

  

  
    
    
    
        
  • 
            Item 1
        
    • 
        
  • 
            Item 2
        
    • 
        
  • 
            Item 3
        
    • 
    

    
    
    

  

输出