ポップアップが自動的に閉じられますか？

Question

jQueryを使用してモーダルポップアップを作成しました（チュートリアルのthisに従っています）。 HTMLの "form"タグをその中に含めるときを除いて、うまくいきます。ここで
はjQueryのHTMLが続いている：

 //SETTING UP OUR POPUP 
     //0 means disabled; 1 means enabled; 
     var popupStatus = 0; 

     //loading popup with jQuery magic! 
     function loadPopup(){ 
      //loads popup only if it is disabled 
      if(popupStatus==0){ 
       $("#backgroundPopup").css({ 
        "opacity": "0.7" 
       }); 
       $("#backgroundPopup").fadeIn("slow"); 
       $("#popupContact").fadeIn("slow"); 
       popupStatus = 1; 
      } 
     } 

     //disabling popup with jQuery magic! 
     function disablePopup(){ 
      //disables popup only if it is enabled 
      if(popupStatus==1){ 
       $("#backgroundPopup").fadeOut("slow"); 
       $("#popupContact").fadeOut("slow"); 
       popupStatus = 0; 
      } 
     } 

     //centering popup 
     function centerPopup(){ 
      //request data for centering 
      var windowWidth = document.documentElement.clientWidth; 
      var windowHeight = document.documentElement.clientHeight; 
      var popupHeight = $("#popupContact").height(); 
      var popupWidth = $("#popupContact").width(); 
      //centering 
      $("#popupContact").css({ 
       "position": "absolute", 
       "top": windowHeight/2-popupHeight/2, 
       "left": windowWidth/2-popupWidth/2 
      }); 
      //only need force for IE6 

      $("#backgroundPopup").css({ 
       "height": windowHeight 
      }); 

     } 


     //CONTROLLING EVENTS IN jQuery 
     $(document).ready(function(){ 

      //LOADING POPUP 
      //Click the button event! 
      $("#1_1").click(function(){ 
       //centering with css 
       centerPopup(); 
       //load popup 
       loadPopup(); 
      }); 

      //CLOSING POPUP 
      //Click the x event! 
      $("#popupContactClose").click(function(){ 
       disablePopup(); 
      }); 
      //Click out event! 
      $("#backgroundPopup").click(function(){ 
       disablePopup(); 
      }); 
      //Press Escape event! 
      $(document).keypress(function(e){ 
       if(e.keyCode==27 && popupStatus==1){ 
        disablePopup(); 
       } 
      }); 

     }); 

そして、ここでは私のHTMLです：

   <div id="popupContact"> 
    <a id="popupContactClose">x</a> 
    <h1>Request</h1> 
    <div id="details"> 
    <form> 
     <div id="whom"> 
      <p > Select the other party: </p> 
      <button id="FB">Facebook List</button> 
      <div class="FB_friends" style="display:none;"> 
        <div style="width: 200px; height: 100px; overflow-x: hidden;   
overflow-y: scroll; border: 0; background-color: #FFFFFF; color: #3399FF;"> 
    <table>  
     <?php 
     $friends = array("John Jay" => "527942618", "Fredie Kruger"=>  
"1116001013", "Jackie Chan"=>"1112", "Sammy Sosa"=>"2345", "Your Fanny"=>"911", "Suky 
Sukie"=>"1938"); 
foreach($friends as $name => $id) { 
echo "<tr><td style=\"align:center\"><img 
src=\"http://graph.facebook.com/$id/picture\" /></td><td>$name</td><td> 
<input type=\"radio\" name=\"selected\" value=\"\" /></td></tr>"; 
} ?> 
</table> 
      </div> 
     </div> 
    </div> 
    </form> 
</div> 
<div id="backgroundPopup"></div> 

任意のアイデアやヘルプをいただければ幸いです。すべてが私には意味をなさないので、これがうまくいくように思われるので、何が起こっているのかよく分かりません。前もって感謝します！

Answer 1

をリンクダウンロードするだけ http://jacklmoore.com/colorbox/ 簡単なポップアップ..itsのためのjQueryのカラーボックスを使用していけない、私は同様の問題がありました。モーダルポップアップウィンドウに検索ボタンがあり、検索テキストはフォームタグ内にあります。検索ボタンをクリックすると、Ajaxコールは検索結果を返し、ポップアップに結果を表示します。

検索ボタンをフォームタグの外に置くと正常に動作します。フォームタグの中に入れると、検索ボタンをクリックするとポップアップが自動的に閉じます。

私の解決策は、この行を追加します：event.preventDefault（）;

 $("#btn_Search").live('click', function (event) { 

      event.preventDefault(); 

      $.ajax({ 
       url: '/some-controller/some-action', 
       type: 'post', 
       data: $("#frmSearchParameters").serialize(), 
       success: function (result) { 
        $('#divSearchResults').html(result); 
       } 
      }); 
     }); 

希望すると便利です。

Answer 2

は、なぜあなたはそれがjsの対応するファイルとCSS

作業コード

//js 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
      $('#showpopup').click(function(){ //A button on clicking shows the popup 
        $.colorbox.init(); 
        $('#popupContact').css('display','block'); 

        $(this).colorbox({ 
         inline:true, 
         href:'#popupContact', 
         onClosed:function(){ 
          $('#popupContact').css('display','none'); 
          $.colorbox.remove(); 
         } 
        }); 

      }); 


     }); 
</script> 

//html 
<div id="popupContact" style="display:none;"><!--Hiding the content first--> 
    <a id="popupContactClose">x</a> 
    <h1>Request</h1> 
    <div id="details"> 
    <form> 
     <!--Your form contents--> 
     <h3>Test</h3> 
    </form> 
</div> 
</div> 

<button id="showpopup">Show popup</button>