CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Rob
Rob

Reputation: 1216

Bootstrap Modal blocks select element

When the Modal appears there is a select list that is anchored to the top left of the page. Eventually that list will be used to provide navigation options; however I am unable to select an option in the list. I have tried to set the z-index higher than the modal but nothing seems to work. Hope someone can shed some light on a solution? Thanks!

<!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>

Upvotes: 0

Views: 5246

Answers (2)

Linztm
Linztm

Reputation: 151

To resolve the issue of a modal blocking all elements beneath it when closed you can also add the following block:

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

Upvotes: 2

Rob
Rob

Reputation: 1216

Twitter bootstrap multiple modal error

My assumptions were correct. The modal enforces focus on itself. The above has the solution created by @SmartLove. Basically place the following after the bootstrap scripts..

$.fn.modal.Constructor.prototype.enforceFocus = function () {};

Now the select element works as expected! Woo Hoo!

Upvotes: 0

Related Questions