Question

我试图在弹出窗口中显示从我的脚本返回的json数据，一旦打开弹出窗口，每个名称将成为弹出窗口中的链接，一旦点击它将打开另一个页面代替父级，它也应该关闭父窗口。我的代码获取数据，但pop-pop没有显示。这是我的代码示例。

CSS：

  .popup {
      width:100%;
      height:100%;
      display:none;
      position:fixed;
      top:0px;
      left:0px;
      background:rgba(0,0,0,0.75);
  }

  /* Inner */
  .popup-inner {
      max-width:700px;
      width:90%;
      padding:40px;
      position:absolute;
      top:50%;
      left:50%;
      -webkit-transform:translate(-50%, -50%);
      transform:translate(-50%, -50%);
      box-shadow:0px 2px 6px rgba(0,0,0,1);
      border-radius:3px;
      background:#fff;
  }

  .popup-close {
      width:30px;
      height:30px;
      padding-top:4px;
      display:inline-block;
      position:absolute;
      top:0px;
      right:0px;
      transition:ease 0.25s all;
      -webkit-transform:translate(50%, -50%);
      transform:translate(50%, -50%);
      border-radius:1000px;
      background:rgba(0,0,0,0.8);
      font-family:Arial, Sans-Serif;
      font-size:20px;
      text-align:center;
      line-height:100%;
      color:#fff;
  }

  .popup-close:hover {
      -webkit-transform:translate(50%, -50%) rotate(180deg);
      transform:translate(50%, -50%) rotate(180deg);
      background:rgba(0,0,0,1);
      text-decoration:none;
  }

JS：

$("document").ready(function(){

  $('#myForm').submit(function(e){

    e.preventDefault();
    var datastring = $("#myForm").serialize();

    $.ajax({

      type: "POST",
      dataType: "json",
      url: "get_json.pl",
      data: datastring,

      success: function(data) {

    var stable =
      '<div class="popup-inner">'+
      ' <h2>Results</h2>'+
          ' <div>'+

      $.each( data, function( key, value ) {
        stable+= '<p><a href="results_1.pl?name=' + value.name + '&gender=' + value.gender + ' "id="btnSend">Name: ' + value.name + '</a> | ' + 'Gender: ' + value.gender + '</p>';

    });

  stable += 
      ' </div>'+
          '<p><a data-popup-close="popup-1" href="#">Close</a></p>'+
          '<a class="popup-close" data-popup-close="popup-1" href="#">x</a>'+
      '</div>';

   var targeted_popup_class = jQuery(this).attr('data-popup-open');
   $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
   e.preventDefault();

      $('[data-popup-close]').on('click', function(e)  {
        var targeted_popup_class = jQuery(this).attr('data-popup-close');
        $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
        e.preventDefault();
      });


   },
   error: function() {
    alert('Error handing data');
   }

   });

});
});

HTML：

<form id="myForm">
  <input type="text" name="name" value="" placeholder="Search by Name" />
  <input type="submit" name="submit" value="Submit form" />
</form>


<div class="popup" data-popup="popup-1">
</div>

感谢您的期待！

Answer 1

如果你想要的话，这一行似乎以+结尾;

var stable =
  '<div class="popup-inner">'+
  ' <h2>Results</h2>'+
  ' <div>';

Answer 2

在考虑了这个之后，我解决了我的问题，这里是代码，它可能对某人有所帮助。如果有任何关于改进代码的建议，请告诉我。

JS：

$("document").ready(function(){

  $('#myForm').submit(function(e){

   // To stop the default behavior, a # will be added to the URL in the address bar.
   e.preventDefault();

   var datastring = $("#myForm").serialize();

    $.ajax({

      type: "POST",
      dataType: "json",
      url: "get_json.pl",
      data: datastring,

      success: function(data) {

      var stable =
       '<div class="popup-inner">'+
       ' <h2>Results</h2>'+
          ' <div>';

      $.each( data, function( key, value ) {
        stable+= '<p><a href="results_1.pl?name=' + value.name + '&gender=' + value.gender + ' "id="btnSend">Name: ' + value.name + '</a> | ' + 'Gender: ' + value.gender + '</p>';

    });

  stable += 
      ' </div>'+
          '<p><a data-popup-close="popup" href="#">Close</a></p>'+
          '<a class="popup-close" data-popup-close="popup" href="#">x</a>'+
      '</div>';

   // Popup will be called here and opended in the div below 
   $('#popup').append(stable).fadeIn(350);

      // This function will close the popup on click.
      $('[data-popup-close]').on('click', function(e)  {

        var targeted_popup_class = jQuery(this).attr('data-popup-close');
    $('#'+targeted_popup_class).fadeOut(350);
    // Or use the id from the div below to close it.
    //$('#popup').fadeOut(350);
        e.preventDefault();

      });


   },
   error: function() {
    alert('Error handing data');
   }

   });

});
});

谢谢！

从弹出窗口中的表单显示json数据结果

2 个答案: