Article From:https://www.cnblogs.com/jimz/p/9967810.html

 To https://www.cnblogs.com/skybreak/p/6137035.html

In Bootstrap, the Modal, select2 plug-in will not be displayed because its Z-index is smaller than modal, and another problem is that select2 will not automatically lose focus after fixing z-index. The code is solved as follows:

<style>
    /*select2In Bootstrap's modal, the default is masked, and now it's forced to be displayed at the front */.select2-drop {Z-index: 10050! Important;}.select2-search-choice-close{Margin-top: 0! Important;Right: 2px! ImportAnt;Min-height: 10px;}Select2-search-choice-close: before {Color: black! Important;}/* Prevent select2 from automatically losing focus */.select2-container {Z-index: 16000! Important;}.select2-drop-mask {Z-index: 15990! Important;}Select2-drop-active {Z-index: 15995! Important;}

  Because modal may be generated later, when Binding select2 events, the parent element should be specified first:

$(function(){
    $("#PaymentId").select2({
        placeholder: "--Please choose - "DropdownParent: $("# myModal")AllowClear: true};};

  When popping up modal with radio select2, I encountered a problem that I could not enter. At this point, I just need to delete the tabIndex attribute on Modal. (remove)tabindex=”-1″ from modal)

Leave a Reply

Your email address will not be published. Required fields are marked *