顯示字段上選擇下拉列表，jquery自舉中的衝突

很高興認識大家。顯示字段上選擇下拉列表，jquery自舉中的衝突

我已經開始使用Bootstrap，這很棒，我喜歡它。我打開一個帶有表格的模式窗口。在這個表格中有一個選擇字段。當有人點擊「其他」時，它會顯示一個字段來描述更多。它在筆記本電腦上效果很好。但該網站正在爲移動設計。當我在iphone或任何手機上加載它時，在選擇其他手機之後，不能再通過模式窗口向下滾動。它會鎖定，而褪色的背景則會滾動。

有人會知道爲什麼或可能是一個簡單的方法解決這個問題。對不起，我希望這個問題不是太過分。

這裏是我使用的代碼顯示新的表單字段從模態窗口

$('select[name=jtype]').change(function(e){ 
    if ($('select[name=jtype]').val() == '1'){ 
$('#jobName').show(); 
    }else{ 
    $('#jobName').hide(); 
    } 
    });

而且表單字段。

 <div class="form-group"> 
     <label class="col-md-4 control-label" for="jtype">Job <span class="text-danger">*</span></label> 
     <div class="col-md-8 controls"> 
     <select name="jtype" id="jtype" required class="form-control"> 
    <option value="" <?php if (!(strcmp('', $_POST['jtype']))) {echo "selected";} ?>> Please Select</option> 
    <option value="1" <?php if (!(strcmp('1', $_POST['jtype']))) {echo "selected";} ?>>Other</option> 
    <option value="2" <?php if (!(strcmp('2', $_POST['jtype']))) {echo "selected";} ?>>Quote</option> 

     </select> 
     </div> 
    </div> 


    <div id="jobName"> 
     <div class="form-group"> 
     <label class="col-md-4 control-label" for="job">New Job Here</label> 
     <div class="col-md-8 "> 
     <input id="job" name="job" type="text" value="<?php if(isset($_POST['job'])){ echo $_POST['job'];}?>" placeholder="Create New Job Type Here" class="form-control input-lg"> 

      </div> 
     </div> 
    </div>

來源

2015-04-12 The Druid

歡迎來到計算器！ :)你可以在jsfiddle中提供一個快速演示嗎？ http://jsfiddle.net/ –

@sebastianHomeier是的。從來沒有這樣做過，我這麼裸露 –

行，所以這裏是一個小提琴http://jsfiddle.net/sL5zt4qu/然而，我已經在我的手機上測試它，它的罰款，所以我認爲這是呈現不同。 –

好的，我找到了答案。看起來Iphone有鍵盤和模式的錯誤，所以有人創造了一個不錯的解決方案。我會後我發現它，但我無法找到鏈接

if(navigator.userAgent.match(/iPhone|iPad|iPod/i)) { 
    $('.modal').on('show.bs.modal', function() { 
     // Position modal absolute and bump it down to the scrollPosition 
     $(this) 
      .css({ 
       position: 'absolute', 
       marginTop: $(window).scrollTop() + 'px', 
       bottom: 'auto' 
      }); 
     // Position backdrop absolute and make it span the entire page 
     // 
     // Also dirty, but we need to tap into the backdrop after Boostrap 
     // positions it but before transitions finish. 
     // 
     setTimeout(function() { 
      $('.modal-backdrop').css({ 
       position: 'absolute', 
       top: 0, 
       left: 0, 
       width: '100%', 
       height: Math.max(
        document.body.scrollHeight, document.documentElement.scrollHeight, 
        document.body.offsetHeight, document.documentElement.offsetHeight, 
        document.body.clientHeight, document.documentElement.clientHeight 
       ) + 'px' 
      }); 
     }, 0); 
    }); 
}

來源

2015-04-15 09:06:36

顯示字段上選擇下拉列表，jquery自舉中的衝突

回答

相關問題