无法在弹出式灯箱上输入文本字段

Posted 2023-04-18

【中文标题】无法在弹出式灯箱上输入文本字段

【英文标题】：Can't type in text field on popup lightbox

【发布时间】：2012-10-22 16:42:21

【问题描述】：

我在 jQuery 中创建了一个灯箱，它会显示一个文本输入字段，但由于某种原因我无法在输入字段中输入，它会自动取消选择。如果我按住鼠标按钮并开始输入，那么它会起作用，但是一旦我松开它，它就会删除所有文本。知道为什么会发生这种情况吗？

这是我的代码（抱歉，我知道很多，但灯箱没有出现在 jsfiddle 中）

html

<div id="submitanswerbutton">
<a href="#answer-box" class="login-window"><div class="btn btn-primary">Ask a Question</a></div>
<div id="answer-box" class="answer-popup">

</div>
</div>​

CSS

 #submittextbutton
float:right;
margin-top:5px;
margin-right:12px;


 #mask 
display: none;
background: #000; 
position: fixed; left: 0; top: 0; 
z-index: 10;
width: 100%; height: 100%;
opacity: 0.5;
z-index: 999;
 

 .answer-popup
display:none;
font-size:14px;
background: #333;
padding: 10px;     
width:250px;
height:300px;
border: 1px solid black;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
box-shadow: 0px 0px 20px #333333; /* CSS3 */
    -moz-box-shadow: 0px 0px 20px #333333; /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #333333; /* Safari, Chrome */
border-radius:13px 13px 13px 13px;
    -moz-border-radius: 13px; /* Firefox */
    -webkit-border-radius: 13px; /* Safari, Chrome */
 

 .answer-popup a 
color:white;
font-size:14px;
text-decoration:none;
background:#333;
    

​

JS

// Clicking on Ask a Question button on Answers page
$(document).ready(function() 
    $('body').on('click', '#submitanswerbutton', function(event)

                //Getting the variable's value from a link 
        var answerBox = $(this).attr('href');

        //Fade in the Popup
        $('.answer-popup').fadeIn(300);

        //Set the center alignment padding + border see css style
        var popMargTop = ($(answerBox).height() + 24) / 2; 
        var popMargLeft = ($(answerBox).width() + 24) / 2; 

        $(answerBox).css( 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        );

        // Add the mask to body
        $('body').append('<div id="mask"></div>');
        $('#mask').fadeIn(300);

        return false;
    );

    // When clicking on the mask layer the popup closed    
    $('#mask').live('click', function()  
      $('#mask , .answer-popup').fadeOut(300 , function() 
        $('#mask').remove();  

    ); 
    return false;
    );
);

// load Answers when click questions via Ajax
// load Answer when clicking question
$(document).ready(function() 
    var url;
    $('.question a').click(function(ev) 
        url = $(this).attr('href');
        $('.answers').load('http://127.0.0.1:8000'+url, function(response)
        );
    return false;
    );

    $('body').on('click', '#submitanswerbutton', function(ev) 
        var pathname = window.location.pathname;
        $('.answer-popup').load(url+'add_answer/');
    );
    return false;
);    ​

【问题讨论】：

您无法链接到您的网站，对吗？

不幸的是它在本地主机上

【参考方案1】：

将#answer-box div 移到#submitanswerbutton div 之外：

<div id="submitanswerbutton">
    <a href="#answer-box" class="login-window"><div class="btn btn-primary">Ask a Question</a></div>
</div>
<div id="answer-box" class="answer-popup"></div>​

如果答案框 div 在第一个 div 中，那么每次单击答案框（例如将光标放入文本框）时，您最终都会调用 body click 事件，该事件会打开另一个答案框！

看到这个工作小提琴：http://jsfiddle.net/manishie/2vmCy/