LightBox not Calling html form

问题

I have a simple example i am using FancyBox for the light box. I have a form configure to use FancyBox. One link is a picture that shows up in the light box when i click it, that works perfect for me. I also have a simple .html form however when i click on it, it doesn't show in the lightbox nor is it redirected to the form. Under is my code:

Menu Form.html

<!DOCTYPE html>
<html>
<head>
    <title>fancyBox - Fancy jQuery Lightbox Alternative | Demonstration</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <!-- Add jQuery library -->
    <script type="text/javascript" src="../lib/jquery-1.8.2.min.js"></script>

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.2"></script>
    <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.2" media="screen" />

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.4"></script>

    <script type="text/javascript">

    $(document).ready(function() {

            $('#regForm').click(function() {
                $.fancybox({
                        'href' : 'form.html'
                    });

                return false;
            });

            $('#pic').click(function() {
                $.fancybox({
                        'href' : 'http://en.gtwallpaper.com/fondecran/chiens/chiens_01.jpg'
                    });

                return false;
            });

        });


    </script>
    <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }
    </style>
</head>
<body>

    <a id ="regForm" href="form.html" >form</a>

    <a id ="pic" href="http://4.bp.blogspot.com/-ZdjEZ8qqBq0/UA2dNK8JYDI/AAAAAAAAAJ8/31bh4BzcA6E/s400/Dog-1.jpg" >dog</a>


</body>
</html>

form.html

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <label>Name</label><input type="text" />
    <label>Password</label><input type="text" />
    <input type="submit"/>

</body>
</html>

回答1:

Is there any reason you have to use the click() method?

If not, this simple script works for both the image and the form :

$(document).ready(function(){
  $(".fancybox").fancybox();
});

Now, in the specific case of the form, since this is an external html document you have to tell fancybox the type of content that has to be open so, in your html you could do

 <a class="fancybox fancybox.ajax" href="form.html" >open form</a>
 <a class="fancybox" href="http://4.bp.blogspot.com/-ZdjEZ8qqBq0/UA2dNK8JYDI/AAAAAAAAAJ8/31bh4BzcA6E/s400/Dog-1.jpg" >open dog image</a>

NOTICE the additional class fancybox.ajax where we let fancybox know the type of content. Please also notice that you could use ajax if the html document is within the same domain or iframe if it is in another domain (where you should have to have access too) so

 <a class="fancybox fancybox.iframe" href="form.html" >open form</a>

Last NOTE : ajax won't work locally, you have to test it in a server.

来源：https://stackoverflow.com/questions/13019514/lightbox-not-calling-html-form

标签

jquery

fancybox

fancybox-2