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

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

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

jQuery与JavaScript相似，但是jQuery方法简单易实现.jQuery减少了代码行。本文演示了两个示例，这些示例将数据从HTML文档主体传递到模式主体中。

示例1：采用这种方法，网页由两个输入字段“名称”和“标记”组成，它们接受来自用户的输入。使用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：在这种方法中，使用了textarea来接受用户的输入。单击提交按钮后，它将调用jQuery函数。使用val()方法将输入文本区域的数据提取到文本变量中。使用jQuery的html()方法将此文本字符串传递给模式主体。

的HTML

  

    
    
  
    
    
    
      
    
    

  

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

  

输出