Question

你能告诉我如何创建一个弹出框。

html是

<tr>
    <td><strong>Involved</strong></td>
    <td><button>Add data<button></td>
</tr>
<tr id="list"  class="ir-shade">
    <td><span class="delete_icon">x</span>Attila Hun</td>            
</tr>

在html中，我创建了一个表，并在其中一个名为"add data"的按钮中创建。按下该按钮时，带有标题的弹出框和带有文本区域和"ok" button的关闭按钮将会当我点击ok button时，输入的数据应显示在<td>中，即html中的"Attila Hun"。

我浏览了jQuery教程。我发布这个，因为我无法从jquery论坛重现这个。请帮我这样做。

jquery 是

jQuery(function($) {  

     $("a.topopup").click(function() {
            loading(); 
            setTimeout(function(){ 
                loadPopup();  
            }, 500); 
      return false;
      });

      function loading() {
         $("div").show();  
      }

     var popupStatus = 0; 

     function loadPopup() { 
        if(popupStatus == 0) { 
            closeloading(); 
            $("#toPopup").show();        
        }   
    }

    function disablePopup() {
        if(popupStatus == 1) { 
            $("#toPopup").hide("normal");  
            $("#backgroundPopup").hide("normal");  
            popupStatus = 0;  
        }
    }     

$("#save").on("click",function(){
    $("a.topopup").after("<b/>" + $("#textval").val());
    $("#toPopup").hide();
});    
});

CSS

 #backgroundPopup { 

    position: fixed;    
    display:none;    
    height:100%;    
    width:100%;    
}

#toPopup { 
    background: none repeat scroll 0 0 #FFFFFF;    
    border: 4px solid #ccc;    
    display: none;    
    font-size: 14px;    
    left: 80%;    
    margin-left: -402px;    
    position: fixed;    
    top: 50%;    
    width: 270px;
    height:70px;
}

这是我试过的代码，我没有得到预期的输出。

提前致谢。

Answer 1

作为一般方法，以下工作：

$('tbody button.add').click(function (e) {
    // stops any default actions the button might have:
    e.preventDefault();
    // finds the 'Attila the Hun' text
    var newText = $(this)
    // traversing to the nearest 'tr' element
    .closest('tr')
    // moves to the next sibling, finds the 'td', retrieves the contents
    .next().find('td').contents()
    // filters out any child nodes that are not textNodes
    .filter(function () {
        // by returning only those nodes that *are* textNodes
        return this.nodeType == 3;
        // retrieves the text
    }).text();

    // updates the text of the '#output' element (whatever this might be)
    $('#output').text(function (i, t) {
        /* checks the user wants to add that new data/text.
           If so, it returns the old text (t) + newText;
           if not it returns only the old text */
        return confirm('Add new data?') ? (t + ' ' + newText) : t;
    });
});

JS Fiddle demo

要显式显示新数据（在确认对话框中），只需将newText变量连接到字符串中：

return confirm('Add new data: "' + newText + '"') ? (t + ' ' + newText) : t;

JS Fiddle demo

参考文献：

Answer 2

如果你想要一个弹出窗口，我建议你看一下jquery UI对话框：

http://jqueryui.com/dialog/

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#dialog" ).dialog();
  });
  </script>
</head>

<body>

<div id="dialog" title="Basic dialog">
  <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

</body>

</html>

Answer 3

根据您提供的代码：http://jsfiddle.net/basarat/H2rBP/

<tr>
    <td><strong>Involved</strong>
    </td>
    <td>
        <button id="but">Add data
            <button>
    </td>
</tr>
<div id="dialog" title="Attila Hun" style="display:none">Your content</div>

和

jQuery(function ($) {

    $("#but").on("click", function () {
        $("#dialog").dialog();
    });

jquery弹出框以获取值并显示在表格单元格中

3 个答案: