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でテーブルを作成し、呼び出されたボタンの1つに作成されました"add data"。そのボタンを押している間、タイトル付きのポップアップボックスと、テキストエリア付きの閉じるボタン"ok" buttonが開きます.クリックok buttonすると、入力したデータが<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

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 ダイアログを参照することをお勧めします。

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 に答える