2013-05-24 3 views
0

У меня есть вход, который при изменении, есть некоторые проверки, и в конечном итоге уведомление отображается с использованием модального.Выбор выпадающего списка при загрузке модальный

Проблема заключается в том, что если на той же странице есть выбор, а вход «onChange» запускается нажатием на кнопку выбора, выпадающее меню выбора выставляется над модальным и не становится «скрытым», поскольку оно можно увидеть на этой скрипке: http://jsfiddle.net/GSqvB/

HTML-код:

<div id="modal-from-dom" class="modal hide fade"> 
    <div class="modal-header"> 
     <a href="#" class="close">×</a> 
     <h3>Modal Heading</h3> 
    </div> 
    <div class="modal-body"> 
     <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
     <a href="#" class="btn primary">Primary</a> 
     <a href="#" class="btn secondary">Secondary</a> 
    </div> 
</div> 

<span>Write someting then click the select <input type="text" id="inputToChange">  </input></span> 

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><span>Click me after filling the input <select><option value="1">This</option><option value="2">should</option> <option value="3">be</option><option value="4">hidden</option></select><span> 

модальное в настоящее время запущен с этим:

var $modal = $('#modal-from-dom'); 
$modal.modal({backdrop: true, keyboard: true, show: false}); 
$('#inputToChange').on('change', function(event) { 
    $modal.modal('show'); 
}); 

T o имитировать поведение, которое вы должны написать что-то на входе, а затем нажать на выбор.

Если я скрою выделение и покажу его, когда модаль закрыт, он работает, но это кажется действительно уродливым обходным решением.

Есть ли способ сделать выбор «близко» или, по крайней мере, остаться за модальным?

ответ

0

После того, как вы продемонстрируете свой мод, попробуйте скрыть &, показывая элемент <select>. Смотрите эту скрипку: http://jsfiddle.net/ZTBGA/4/

$modal.modal('show'); 
    $("#input2").hide(); 
    setTimeout(function() { 
     $("#input2").show(); 
    }, 5); 

Edit: «Есть ли способ, чтобы сделать выбор„закрыть“или, по крайней мере, остаться модальным?»

.blur() может работать в некоторых браузерах, но не в Chrome. Решение выше будет работать для всех.

+0

Это решает, хотя я бы предпочел что-то «более чистое», без необходимости скрывать и снова показывать элементы. Но большое спасибо. – Ricardo

Смежные вопросы