0

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

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输入的数据时，应显示在 a 中<td>，即"Attila Hun"在html中。

我浏览了 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;
}

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

提前致谢。

4

3 回答 3

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 小提琴演示。

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

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

JS 小提琴演示。

参考：

于 2013-04-30T07:05:09.740 回答
0

根据您提供的代码：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();
    });
于 2013-04-30T06:15:22.297 回答
0

如果您想要一个弹出窗口，我建议您查看 jquery UI Dialog：

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>
于 2013-04-30T05:37:01.107 回答