在禁用其他字段后点击弹出窗口上的文本框

Question

我有一个弹出窗口的文本框，我想在显示弹出窗口后单击第一个文本框，现在我需要禁用使用黑色或任何颜色的背景颜色，如何禁用它，如何写诗，如何把这个代码，

我现在的结构

我需要这样的

$(document).ready(function() { 
 
    $('.popr').popr(); 
 
}); 
 

 
$(document).on('click', '#feugait', function() { 
 
    alert('Feugait'); 
 
}); 
 
$(document).ready(function() { 
 
    $('[data-toggle="popover"]').popover(); 
 

 
    $('[data-toggle="popover"]').on("click",function(){ 
 
     \t $("#messageTextBox").val($(this).find("div").text()); 
 
    }); 
 
}); 
 

 

 
(function($) { 
 

 
    $.fn.popr = function(options) { 
 

 
      var set = $.extend({ 
 

 
       'speed'  : 200, 
 
       'mode'   : 'bottom' 
 

 
      }, options); 
 

 
      return this.each(function() { 
 

 
       var popr_cont = '.popr_container_' + set.mode; 
 
       var popr_show = true; 
 

 
       $(this).click(function(event) 
 
       { 
 
        $('.popr_container_top').remove(); 
 
        $('.popr_container_bottom').remove(); 
 

 
        if (popr_show) 
 
        { 
 
         event.stopPropagation(); 
 
         popr_show = false; 
 
        } 
 
        else 
 
        { 
 
         popr_show = true; 
 
        } 
 

 
        var d_m = set.mode; 
 
        if ($(this).attr('data-mode')) 
 
        { 
 
         d_m = $(this).attr('data-mode') 
 
         popr_cont = '.popr_container_' + d_m; 
 
        } 
 

 
        var out = '<div class="popr_container_' + d_m + '"><div class="popr_point_' + d_m + '"><div class="popr_content">' + $('div[data-box-id="' + $(this).attr('data-id') + '"]').html() + '</div></div></div>'; 
 

 
        $(this).append(out); 
 

 
        var w_t = $(popr_cont).outerWidth(); 
 
        var w_e = $(this).width(); 
 
        var m_l = (w_e/2) - (w_t/2); 
 

 
        $(popr_cont).css('margin-left', m_l + 'px'); 
 
        $(this).removeAttr('title alt'); 
 

 
        if (d_m == 'top') 
 
        { 
 
         var w_h = $(popr_cont).outerHeight() + 39; 
 
         $(popr_cont).css('margin-top', '-' + w_h + 'px'); 
 
        } 
 

 
        $(popr_cont).fadeIn(set.speed); 
 
       }); 
 

 
       $('html').click(function() 
 
       { 
 
        $('.popr_container_top').remove(); 
 
        $('.popr_container_bottom').remove(); 
 
        popr_show = true; 
 
       }); 
 
      }); 
 
    }; 
 

 
})(jQuery);

.popr 
 
{ 
 
    cursor: pointer; 
 
} 
 
.popr a 
 
{ 
 
    color: #333; 
 
    text-decoration: none; 
 
    border: 0; 
 
} 
 
.popr-box 
 
{ 
 
    display: none; 
 
} 
 
.popr_content 
 
{ 
 
    background-color: #fff; 
 
    padding: 7px 0; 
 
    margin: 0;width: 200px; 
 
    height: auto; 
 
} 
 
.popr-item 
 
{ 
 
    font-family: sans-serif; 
 
    color: #333; text-align: center; 
 
    font-size: 16px; 
 
    padding: 4px 29px 5px 29px; border-bottom: solid 1px #fbeeee; 
 
} 
 
.popr-item:hover 
 
{ 
 
    color: #333; 
 
    background-color: #dcdcdc; 
 
} 
 

 
.popr_container_bottom 
 
{ 
 
    display: none; 
 
    position: absolute; 
 
    margin-top: 10px; 
 
    box-shadow: 2px 2px 5px #f9f9f9; 
 
    z-index: 1000; 
 
} 
 
.popr_container_top 
 
{ 
 
    display: none; 
 
    position: absolute; 
 
    box-shadow: 2px 2px 5px #f9f9f9; 
 
    z-index: 1000; 
 
} 
 
.popr_point_top 
 
{ 
 
    position: relative; 
 
\t background: #fff; 
 
\t border: 1px solid #dcdcdc; 
 
} 
 
.popr_point_top, .popr_point_bottom { 
 
    position: relative; 
 
    background: #fff; 
 
    border-radius: 12px; 
 
} 
 
.popr_point_top:after, .popr_point_top:before 
 
{ 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
\t border: solid transparent; 
 
\t top: 100%; 
 
\t content: ""; 
 
\t height: 0; 
 
\t width: 0; 
 
} 
 
.popr_point_top:after 
 
{ 
 
\t border-top-color: #fff; 
 
\t border-width: 8px; 
 
\t left: 50%; 
 
\t margin-left: -8px; 
 
} 
 
.popr_point_top:before 
 
{ 
 
\t border-top-color: #dcdcdc; 
 
\t border-width: 9px; 
 
\t left: 50%; 
 
\t margin-left: -9px; 
 
} 
 
.popr_point_bottom:after, .popr_point_bottom:before 
 
{ 
 
\t position: absolute; 
 
\t pointer-events: none; 
 
\t border: solid transparent; 
 
\t bottom: 100%; 
 
\t content: ""; 
 
\t height: 0; 
 
\t width: 0; 
 
} 
 
.popr_point_bottom:after 
 
{ 
 
\t border-bottom-color: #fff; 
 
\t border-width: 8px; 
 
\t left: 50%; 
 
\t margin-left: -8px; 
 
} 
 
.popr_point_bottom:before 
 
{ 
 
\t border-bottom-color: #dcdcdc; 
 
\t border-width: 9px; 
 
\t left: 50%; 
 
\t margin-left: -9px; 
 
} 
 
.popover-title { 
 
    text-align: center; color: red; 
 
} 
 

 
.custom-popover li { 
 
    border: none!important; 
 
    text-align: center; 
 
} 
 

 
.custom-popover li:nth-child(2) { 
 
    border-top: 1px solid #ccc!important; 
 
} 
 

 
.custom-popover li:last-child { 
 
    border-top: 1px solid #ccc!important; 
 
} 
 
#title-pop {font-size: 12px; color: #b89981;}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
    <div class=" popr form-group" data-id="1"> 
 
    <a href="#" data-placement="bottom" title="Bill Category"><input class="form-control input-sm" id="messageTextBox" type="text" placeholder="Select category"> 
 
    </a> 
 
    </div> 
 

 

 
<div class="form-group"> 
 
<input class="form-control input-sm" id="Description" type="text" placeholder="Description"> 
 
</div> 
 

 
<div class="form-group"> 
 
<input class="form-control input-sm" id="Date" type="text" placeholder="Date"> 
 
</div> 
 

 
<div class="form-group"> 
 
<input class="form-control input-sm" id="Amount" type="text" placeholder="Amount"> 
 
</div> 
 

 

 

 

 
<!-- loaded popover content --> 
 
<div id="popover-section selectBox"> 
 
    <div class="selectBox" class="popr-box" data-box-id="1"> 
 
<div id="title-pop" class=" popr-item">Bill category 
 
</div> 
 
<a href="#" title="Menu" data-toggle="popover" data-trigger="hover"><div class="popr-item">Staff Payment 
 
</div></a> 
 
    <a href="#" title="Menu" data-toggle="popover" data-trigger="hover"><div class="popr-item">Food and Beverage 
 

 
</div></a> 
 
<a href="#" title="Menu" data-toggle="popover" data-trigger="hover"><div class="popr-item">Car rent 
 
</div></a> 
 
    </div> 
 

 
</div>

Answer 1

请

HTML

<div id="layer" class=""></div> 

CSS

.layer{ 
    position:absolute; 
    top:30px; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color:rgba(0,0,0,0.5); 
    z-index:99; 
} 

检查这个 link

我已经做一层

JQuery的

$("#messageTextBox").on('focus',function(){ 
    $("#layer").addClass("layer"); 
}); 

$("#messageTextBox").on('focusout',function(){ 
    $("#layer").removeClass("layer"); 
}); 

说明：

我们只是对#messageTextBoxfocus加层类div和删除的focusout。其余的工作是由图层CSS类