Can't enter text inside fancybox

Question

I can't enter any text inside the textbox in fancybox.

Click on "Change email address"

Here is my code Jsfiddle

Javascript

$(document).ready(function() {
        $("#emailverification").fancybox({
         closeClick  : true, // prevents closing when clicking INSIDE fancybox 
         openEffect  : 'none',
         closeEffect : 'none',             
         closeBtn : false,                
//             keys : {
//                close  : null
//             },
         helpers   : { 
          overlay : {closeClick: false} // prevents closing when clicking OUTSIDE fancybox 
         }
        }).trigger("click");

        $('#logout').click(function(){
            window.location="<?php echo site_url(); ?>home/logout";                
        });

        $('#addbtn').click(function(){
            $(".input_add").toggle(); //add input box                                 
        });   

        $( "#resendemail" ).click(function() {
            //code here...
        });
    });

Thanks in advance.

score 1 · Answer 1 · edited May 23 '17 at 12:09

The problem with your code is that you are referring to the selector #emailverification as both, trigger and target of fancybox

You have this html :

<div id="emailverification" style="display:none;">
    <!-- content -->
</div>

... then you are doing

$("#emailverification").fancybox({ ... }).trigger("click");

... so every time you click on the contents of #emailverification, fancybox is triggered over and over again, hence you aren't able to input any text inside of it.

Just change your code to :

$.fancybox("#emailverification", { ... });

... to trigger fancybox programmatically. Notice we got rid of the .trigger() method.

BTW, the option closeClick should be turn to false, otherwise clicking inside fancybox will close it. See this https://stackoverflow.com/a/8404587/1055987 for further reference.

See your forked JSFIDDLE

Can't enter text inside fancybox

1 Answers1