Bootstrap模态块选择元素

当Modal出现时，有一个选择列表锚定在页面的左上角。最终该列表将被用于提供导航选项;但是我无法在列表中选择一个选项。我试图设置z-index高于模式，但似乎没有任何工作。希望有人能够阐明解决方案？谢谢！Bootstrap模态块选择元素

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Tool</title> 
<!-- Bootstrap v2.3.2 --> 
<link href="css/bootstrap.css" rel="stylesheet" /> 
</head> 
<body> 
<button type="button" class="onl btn btn-success btn_online">Submit</button> 

<!-- popup message --> 
<div id="popup_message" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 class="_c1g">Description</h3> 
</div> 

<div class="well msg" id="msg" style="max-height:400px;overflow:auto;"></div> 

<div class="modal-footer"> 
    <button class="btn _c1e" data-dismiss="modal" aria-hidden="true">Close</button> 
</div>

<script src="script/jquery-1.8.3.js" type="text/javascript"></script> 

<!--Bootstrap v3.0.0--> 
<script src="script/bootstrap.min.js" type="text/javascript"></script> 

<script> 
    $(document).ready(function() { 

     $(document).on('click', '.btn_online', function (e) { 
      $('#popup_message').modal('show'); 
      $("body").append("<select id='my_redirect' style='top:20px;left:20px;z-index:1051;position:absolute;'><option value='' >Select...</option><option value='Page1' >Page1</option><option value='Page2' >Page2</option></select>") 

     }); 

    }); 
</script>

来源

2013-10-16 Rob

看起来工作得很好，我http://jsfiddle.net/cErF4/2/ – Sinetheta

@Sinetheta在你的小提琴中没有对话框显示。我正在使用http://netdna.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css（不是3.0），然后尝试它。选项不可选。 – Rob

当然，它仍然在2.3.2中工作，尽管http://jsfiddle.net/cErF4/6/你使用的是什么浏览器？问题到底是什么？ – Sinetheta

Twitter bootstrap multiple modal error

我的假设是正确的。模式强调对自己的关注。上面有@SmartLove创建的解决方案。基本上在引导脚本后面放置以下内容：

$ .fn.modal.Constructor.prototype.enforceFocus = function（）{};

现在select元素按预期工作！呜呼！

来源

2013-10-17 16:44:50 Rob

要解决一个模式阻止它下面的所有元素的问题，当关闭时，您还可以添加以下块：

<style> 
    /*Modal blocking caused issues with selecting objects*/ 
    .modal { display:none; } 
</style>

来源

2014-03-03 20:23:20 Linztm

Bootstrap模态块选择元素

回答

相关问题