想要通過按鈕顯示特定的窗體細節

Question

我的腳本中有一些窗體信息顯示鼠標懸停信息。

我該如何建立一個按鈕到我的原始形式，並在按下按鈕時將這些按鈕顯示在新窗口中。

我想所有關於我的標籤信息，最大長度等進行了新的單獨的頁面上顯示

$('form').on('mouseover', 'input, textarea, select', function() { 
    var $tag = $(this); 
    var $form = $tag.closest('form'); 
    var title = this.title; 
    var id = this.id; 
    var name = this.name; 
    var value = this.value; 
    var type = this.type; 
    var cls = this.className; 
    var tagName = this.tagName; 
    var options = []; 
    var hidden = []; 
    var formDetails = ''; 
    var isRequired = $(this).prop('required'); 
    var alignment = $(this).attr('align'); 
    var maxlength = $(this).prop('maxlength'); 
    var format = $(this).attr('Format'); 
    var AutoComplete = ''; 
    var selectInfo = ''; 
    var readonly = $(this).attr('readonly'); 
    var disabled = $(this).attr('disabled'); 


    if ($form.length) { 
     $form.find(':input[type="hidden"]').each(function (index, el) { 
      hidden.push("\t" + el.name + ' = ' + el.value); 
     }); 

     var formName = $form.prop('name'); 
     var formTitle = $form.prop('title'); 
     var formId = $form.prop('id'); 
     var formClass = $form.prop('class'); 

     formDetails += 
      "\n\n\nFORM NAME: " + formName + 
      "\nFORM TITLE: " + formTitle + 
      "\nFORM ID: " + formId + 
      "\nFORM CLASS: " + formClass + 
      "\nFORM HIDDEN INPUT:\n" + hidden.join("\n"); 
    } 

    if ((isRequired === 'undefined') || (isRequired === false))   
     isRequired = '';   
    else   
     isRequired = "\nRequired: " + "Y"; 

    if (format === undefined) 
     format = ''; 
    else 
     format = "\nFormat: " + format; 

    if (value === "") 
     value = ""; 
    else 
     value = "\nDefault Value: " + value; 

    if (readonly === undefined) 
     readonly = ''; 
    else 
     readonly = "\nReadOnly: " + "Y"; 

    if (disabled === undefined) 
     disabled = ''; 
    else 
     disabled = "\nDisabled: " + "Y"; 


    if ($(this).hasClass('ui-autocomplete-input')) 
     AutoComplete = 'AutoComplete'; 


    if ('SELECT' === tagName) { 
     $tag.find('option').each(function (index, el) { 
      options.push(el.value); 
     }); 
     maxlength = 'Not required'; 

     selectInfo += 
      "\nSelect Options:\n\t" + options; 
    } 

    var tempTitle = 
     "\nName: " + name + 
     "\nType: " + tagName + "\ - " + type +    
     "\nMaxlength: " + maxlength + 
     isRequired + 
     value + 
     readonly + 
     disabled + 
     format + 
     selectInfo; 

    if (AutoComplete !== '') 
     tempTitle += "\nAutoComplete: Y"; 


    $(this).each(function() { 
     $.each(this.attributes, function() { 
      // this.attributes is not a plain object, but an array 
      // of attribute nodes, which contain both the name and value 
      if (this.specified) { 
       //console.log(this.name, this.value); 
      } 
     }); 
    }); 

    //tempTitle += formDetails; 
    tempTitle; 

    $tag.prop('title', tempTitle); 
    $tag.on('mouseout', function() { 
     $tag.prop('title', title); 
    }) 
}); 

Answer 1

你在找這樣的：

注：彈出窗口被阻止在這個「運行代碼片段」上。請在你的最後嘗試。

<script type="text/javascript"> 
 
\t var info1 = "some information 1"; 
 
\t var info2 = "some information 2"; 
 
    \t var info3 = "some information info3"; 
 
var info4 = "some information info4"; 
 

 
$("#openPopup").click(function(){ 
 
    var newWin = window.open("","infowindow","height=200,width=300"); 
 

 
    newWin.document.write("<p>"+info1+"</p>"); 
 
    newWin.document.write("<p>"+info2+"</p>"); 
 

 
    var bodyElem = $(newWin.document).find("body"); 
 
    
 
    if(bodyElem) 
 
    { 
 
    bodyElem.append("<p>"+info3+"</p>"); 
 
    bodyElem.append("<p>"+info4+"</p>"); 
 
    } 
 
    
 
    
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<button id="openPopup">Open Popup</button>