Modale Box für Optionen in Selectize.js

Question

Ist es möglich, selectize.js zu ändern? Anstatt ein Dropdown zu haben, wird es eine modale Box für seine Optionen öffnen? Ich denke darüber nach, ein onfocus-Ereignis zu haben, dann wird es dieses modale öffnen, aber das Dropdown verhindern. Ich bin mir nicht sicher, wie ich es erreichen kann. und Wie kann ich die selectize bevölkern, sobald die modalen Optionen gespeichert wurden

Answer 1

Es ist normalerweise keine gute Idee, eine Code-Bibliothek anzupassen, weil Sie nicht auf die nächste Version aktualisieren können. Sie sind besser dran, Ihre eigene Lösung mit js und CSS zu rollen. Es ist nicht so schwierig, modale Boxen zu erstellen. Sie müssen nur ein Div in einem höheren Z-Index als den Rest der Seite schweben lassen und dann eine transparente Ebene dahinter platzieren, damit der Benutzer nicht auf die Hintergrundseite klickt. Hier ist ein Beispiel für CSS und HTML, mit denen ich ein Modal float.

css

.BDT_Dialog_Layer { 
position: absolute; 
display: table; 
top: 0px; 
left: 0px; 
height: 99%; 
width: 99%; 
} 
.BDT_Dialog_Center { 
position:fixed; 
top:30%; 
width:100%; 
} 
.BDT_Dialog_Decoration { 
position:relative; 
margin:0 auto; 
text-align: center; 
background-color: #ffffff; 
display: table;  
/* -- background-color: #DDDDDD; 
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF' , endColorstr='#BBBBBB'); 
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0.1, #FFFFFF), color-stop(1, #BBBBBB) ); 
background-image: -moz-linear-gradient( center top, #FFFFFF 10%, #BBBBBB 100% ); -- */ 
-moz-border-radius: 15px; 
-webkit-border-radius: 15px; 
-khtml-border-radius: 15px; 
border-radius: 15px; 
-moz-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000; 
-webkit-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000; 
-khtml-box-shadow: 0 1px 8px #666666, 0 1px 4px #000000; 
box-shadow: 0 1px 8px #666666, 0 1px 4px #000000; 
} 

html

<div id="dialogLayer" class="BDT_Dialog_Layer"> 
    <div class="BDT_Dialog_Center"> 
     <div class="BDT_Dialog_Decoration">      
      My stuff       
     </div> 
    </div> 

hier ist die Sperrschicht css

div.BlockInteractionWithPage { 
position: absolute; 
top: 0px; 
left: 0px; 
padding-top: 0px; 
padding-right: 0px; 
padding-bottom: 0px; 
padding-left: 0px; 
background-color: #ffffff; 
opacity: 0.0; 
filter: alpha(opacity=0); /* filter:alpha for IE8 and earlier */ 
height: 100%; 
width: 100%;  
}