всплывающее окно, генерируемое с помощью jquery, закрывается автоматически, когда я включаю в него тег <form>?

Question

Я создал модальное всплывающее окно, используя jQuery (при этом следуя этому учебнику).Он работает хорошо, за исключением случаев, когда я пытаюсь включить в него 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

У меня была похожая проблема.в моем модальном всплывающем окне есть кнопка поиска, текст поиска находится внутри тега формы.при нажатии на кнопку поиска вызов 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

Почему вы не используете Jquery colorbox для всплывающих окон .. его просто http://jacklmoore.com/colorbox/ Просто скачайте его, ссылку на соответствующий файл 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>