modal-dialog

I want to use a fixed header in my Bootstrap modal, however if I set .modal-header as position:fixed it scrolls along with the moda content. How do I create a trully fixed header in BS modal? Instead of trying to make the header fixed, just fix the height of the body and make it scrollable. That way the header (and footer) will always be visible. You can easily do this using the CSS3 vh unit together with calc . Both vh as calc have pretty good browser support (IE9+). The vh unit is relative to the viewport (= browser window) height. 1 vh is 1% of the height and 100vh means 100% of the

I have a dilema, I want to present to the user a semi-transparent view. I found out by experimenting that if I simply pushed the transparent view to the top of my NavigationController's stack, that it would not render the transparency level I wanted. So I decided to simply add the view as a subview of the current view at the top of the stack. This solution works, the view below is still visible, and the View is 'semi-modal'. The problem is, if the parent view inherits from UITableViewController (as mine does), then the view I 'push' onto it, does not cover the navigation bar at the top. I

I have tried several of the suggestions posted here on other questions and on stackexchange, and nothing is working to my satisfaction. I am trying to load dynamic content into a modal. Specifically, YouTube videos or Soundcloud audio within an iFrame. So that any user who visits the site, can enter links for videos or audio. The modal then dynamically loads that users links. Each subsequent user can see each others links, all within a modal. (separate modal loads up for each user) I can't get this to work quite right. I have created a separate html file called "modal.html" to test this out,

I am using bootstrap to set up a modal popup. When a button is clicked, the modal dialog opens, but the entire page is slightly "tinted", and I can't interact with the modal (the page essentially freezes). Do you know why this would be? Here is the code: button: <a class="add-list-button-no-margin opener" id="id" data-toggle="modal" href="#myModal" style="color: white; font:14px / 14px 'DINMedium','Helvetica Neue',Helvetica,Arial,sans-serif;">Play my city</a> modal: <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class=

Looked around quite a bit, and can't seem to find a JQuery solution ( maybe its just a limitation of JavaScript ) for this: <a href="somelink.php" onclick="return confirm('Go to somelink.php?');">Click Here</a> In the above example, when a user clicks on the link, it will only go to its href if the user clicks OK in the confirm box. What I am trying to do is get a more modern look using a popup div. Perhaps something like this: <a href="somelink.php" onclick="return jq_confirm('Go to somelink.php?');">Click Here</a> (Where jq_confirm is a custom JQuery confirm function that pops up a nice div

I have tried almost all of the jQuery Modal plugins I can find on the net but they are all much to bulky for what I need. I don't need all the fancy features, I want to be able to open a div and have the background of the page go transparent grey like the photo below and have my div be on top of it, that is all I need to do so I would like to write some jQuery to do this instead of using a bulky plugin. Does anyone have any small code that can do this task? Is the transparent background an image or just CSS? EDIT: This is obviously outdated. So please refer to Andrew Odri post below. I don't

i need to make a validation only if a modal is open, because if i open it, and then i close it, and the i press the button that opens the modal it doesn't work because it is making the jquery validation, but not showing because the modal was dismissed. So i want to ad a jquery if modal is open so the i do validate, is this possible? <script> $(document).ready(function(){ var validator =$('#form1').validate( { ignore: "", rules: { usu_login: { required: true }, usu_password: { required: true }, usu_email: { required: true }, usu_nombre1: { required: true }, usu_apellido1: { required: true },

I am using Twitter Bootstrap modals, with the default options where you can click the backdrop or press [Esc] to close the modal. However, when I initiate an ajax operation in the modal I want to disable the modal from being closed in any way. So I disable buttons and hide the modal's close button but I can't figure out how to disable the backdrop and the [Esc] key. I tried: $('#myModal').modal({ backdrop: 'static', keyboard: false }); But this doesn't seem to work on the fly. I will also need to re-enable the backdrop and keyboard once the ajax operation is finished. davidkonrad Note : This