如何将数据传递到引导模式？

Bootstrap 是一个用于设计网页的 CSS 框架。 Bootstrap v4.5 是最新版本。 Bootstrap 连同 HTML 和 JavaScript 可用于构建响应式网页。

模态是需要执行某些操作的弹出窗口或对话框。一个模态。 Bootstrap 具有内置的模态组件。模态由模态标题和模态主体两部分组成。数据可以从 HTML 文档传递到模态主体，当模态弹出时显示该文档。使用 jquery 方法将数据传递到模态主体中。

jQuery 类似于 JavaScript，但 jQuery 方法简单且易于实现。jQuery 减少了代码行数。本文演示了两个示例，其中数据从 HTML 文档正文传递到模态正文中。

示例 1：在这种方法中，网页由两个输入字段 Name 和 Marks 组成，它们接受来自用户的输入。使用 jQuery val() 方法使用各个字段的 id 提取输入字段的数据。接下来将从输入字段获得的数据连接成一个字符串。这个字符串使用 jQuery 的 html() 方法传递给模态体。

HTML

  

    
    
  
    
    
    
      
    
    

  

    
  
        
        Name: 
  
        Marks: 
  
        
        
            Submit
        
  
        
        
              
            
                
                    
                        
                            Confirmation
                        
                          
                        
                            
                                ×
                            
                        
                    
  
                    
  
                        
                        
                        
                            Submit
                        
                    
                
            
        
    
  
    
        $("#submit").click(function () {
            var name = $("#name").val();
            var marks = $("#marks").val();
            var str = "You Have Entered " 
                + "Name: " + name 
                + " and Marks: " + marks;
            $("#modal_body").html(str);
        });
    

  

输出

示例 2：在这种方法中，文本区域用于接收用户的输入。单击提交按钮时，它会调用 jQuery函数。输入文本区域的数据使用 val() 方法提取到文本变量中。此文本字符串使用 jQuery 的 html() 方法传递到模态主体。

HTML

  

    
    
  
    
    
    
      
    
    

  

    
  
        
                
          
        
        
            Submit
        
  
        
        
            
                
                    
                        
                            Entered Data
                        
                          
                        
  
                            
                                ×
                            
                        
                    
  
                    
  
                        
                        
  
                        
                            Proceed
                        
                    
                
            
        
    
  
    
        $("#submit").click(function () {
            var text = $("#textarea").val();
            $("#modal_body").html(text);
        });
    

  

输出

HTML 是网页的基础，用于通过构建网站和 Web 应用程序进行网页开发。您可以按照此 HTML 教程和 HTML 示例从头开始学习 HTML。