Home/ Questions/Q 9199331
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:30:42+00:00

I am using fancybox ( http://fancyapps.com ) in my application. I have a div

  • 0

I am using fancybox (http://fancyapps.com) in my application. I have a div defined like this:

 <div id="dialog-user-login" title="User Login" style="display: none" class="popup-dv">
            <div id="myDivID7">
                <div class="up-content">
                    Your Contents SHow HERE
                    <input id="txtUserName" name="txtUserName" class="normal" type="text" /><br />
                    <input id="txtpassword" name="txtUserName" class="normal" type="password" /><br />
                </div>
                <div class="social-icons">
                    <img src="wp-content/themes/touch/images/twit-icon.png" width="65" height="22">
                    <img src="wp-content/themes/touch/images/face-icon.png" width="65" height="22">
                </div>
            </div>
        </div>

I have included these files:

<script src="../../Content/FancyBox/jquery-1.9.0.min.js" type="text/javascript"></script>
    <link href="../../Content/FancyBox/jquery.fancybox.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/FancyBox/jquery.fancybox.js" type="text/javascript"></script>

and using this code 

 $(document).ready(function () {

            $("a#fancyBoxLink1").click();

});

1) It shows the fancybox but when i click overlay, it closes.
2). If I use following code, it doesn’t work:

 $("a#fancyBoxLink1").fancybox({
            'href': '#myDivID1',
            'titleShow': false,
            'transitionIn': 'elastic',
            'transitionOut': 'elastic'
        });

with this html:

<a href="#myDivID1" class="mrgn-ao" id="fancyBoxLink1">
        <div id="dialog-user-login" title="User Login" style="display: none" class="popup-dv">
            <div id="myDivID7">
                <div class="up-content">
                    Your Contenssssssssssssssssssssssssssssssssssssssssssssssssssst SHow HERE
                    <input id="txtUserName" name="txtUserName" class="normal" type="text" /><br />
                    <input id="txtpassword" name="txtUserName" class="normal" type="password" /><br />
                </div>
                <div class="social-icons">
                    <img src="wp-content/themes/touch/images/twit-icon.png" width="65" height="22">
                    <img src="wp-content/themes/touch/images/face-icon.png" width="65" height="22">
                </div>
            </div>
        </div>
        </a>

Please suggest me what is wrong with my code.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need add in the <head> code:

    <script>
$(document).ready(function() {
$("#fancyBoxLink1").fancybox({
'titleShow': false,
'transitionIn': 'elastic',
'transitionOut': 'elastic'
});
});
</script>

    On the <body> code:

    <a href="#dialog-user-login" class="mrgn-ao" id="fancyBoxLink1">
<div id="dialog-user-login" title="User Login" style="display: none;width:500px;" class="popup-dv">
<div id="myDivID7">
<div class="up-content">
Your Contenssssssssssssssssssssssssssssssssssssssssssssssssssst SHow HERE
<input id="txtUserName" name="txtUserName" class="normal" type="text" /><br />
<input id="txtpassword" name="txtUserName" class="normal" type="password" /><br />
</div>
<div class="social-icons">
<img src="wp-content/themes/touch/images/twit-icon.png" width="65" height="22">
<img src="wp-content/themes/touch/images/face-icon.png" width="65" height="22">
</div>
</div>
</div>
</a>

    href – this is the link of pop-up-div

    • 0