Модальная коробка для опций в Selectize.js

Question

Модальная коробка для опций в Selectize.js

Можно ли изменить selectize.js? Вместо выпадающего списка он откроет модальное поле для своих параметров? Я подумываю о событии onfocus, тогда оно откроет этот мод, но предотвратит выпадение. Я просто не уверен, как мне этого добиться. и Как я могу заполнить выборку, как только модальные параметры были сохранены

0

ajax jquery php selectize.js

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Обычно не рекомендуется настраивать библиотеку кода, потому что вы не сможете перейти на следующую версию. Вам лучше использовать собственное решение, используя js и css. На самом деле создание модальных блоков не так уж и сложно, вам просто нужно поместить элемент div с более высоким z-индексом, чем остальная часть страницы, а затем поместить прозрачный слой позади него, чтобы пользователь не мог перейти на фоновую страницу. Вот некоторые примеры CSS и HTML, которые я использую, чтобы использовать модал.

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>

вот блокирующий слой 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%;
}

0