bootstrap-modal

I'm trying to pass back a value from a uibModal. I can define the return if the user clicks the modal's close button $scope.close = function () { $modalInstance.close($scope.editMade); }; But this doesn't work if the user click the backdrop area. How can I define a return value for that particular event? When you click on the backdrop outside, it does a dismiss internally. Try using this inside modal: $modalInstance.dismiss($scope.editMade); And use this to handle data: instance.result.then(function(){ //Get triggers when modal is closed }, function(){ //gets triggers when modal is dismissed.

How do I hide Bootstrap modal in mobile . I tried to use modifier classes such as hidden-xs hidden-sm but fail. The modal would go to the bottom page, leaving the top page inaccessible. Here's my code: <div class="modal fade hidden-xs hidden-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-top:1em;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body"> <img src="banner.jpg" height="388" width="558" alt="" class="img-rounded"> </div> <div class="modal-footer" style="border:0"> <button type="button" class="btn

I'm using CSS Bootstrap's Modal feature, and it's working perfectly. However, I want to add a functionality that while the modal dialog is open and the rest of the web page is covered up by the .modal-backdrop, one of the outside elements from a different place within the scope of the page's structure can be exposed on top of the backdrop: <div id="outside-element"> I want this element exposed even while the modal is active, upon clicking the button in the modal dialog box </div> <div id="help-box" class="modal fade" data-backdrop="static" data-keyboard="false" data-show="true" tabindex="-1"

I am building a dashboard-like interface with a set of entities containing comparable data. Each of these entities have an edit-button which I would like to use to open a modal with the respective data displayed. I would like to reuse the same modal template, and display the data from the entity who's edit-button was clicked. I am using Angular2 with ng-bootstrap , which relies on Bootstrap 4 . From the ng-bootstrap modal docs , and it's accompanying plunkr , I was able to create my own working modal component like so (simplified for layout): //editmodal.html <template #content let-c="close"

I have a simple bootstrap modal populated via ajax. The content is an Accordion made by the bootstrap plugin Collapse. If I try to detect the hidden.bs.collapse (or any other Event detectable ), it won't be fired. http://jsfiddle.net/Diac/n2jm5cy8/ HTML <!-- Button trigger modal --> <a href="/echo/html/" data-remote="false" data-toggle="modal" data-target="#myModal">Launch demo modal</a> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header">

I'm using tinymce inside a bootstrap modal but I'm having a problem with tinymce dropdowns on page scroll: basically their absolute positions are not updated and they are shown in the wrong position. I prepared a jsbin to show the problem: just open the color picker and scroll the page. Any hints? Anyone had the same issue and managed to make it work? Thanks In addition to user206056 css answer: .mce-menu {position:fixed !important} try adding to your TinyMCE init method, adding the ui_container parameter and set it to the selector of your bootstrap modal. Something like: tinymce.init({

I am trying to get a jQuery Chosen select / dropdown list to work in a Bootbox modal. I have almost the same exact code working on a standard HTML page, so I thought it would be straight forward to just pop my list into a modal. I generate my divs and select objects in the modal, and then after it is "shown", I call Chosen: div.on("shown", function() { $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); myApp.init(); }); After this, Chosen seems to be broken. The select items are grayed out--I cannot click them. Inside myApp.init(), I populate the

I am trying to design a modal that covers the full width of the device. Here is my attempt: <!-- Modal --> <div class="container-fluid modal fade bd-example-modal-lg" style=" max-width: 100vw;" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Preview</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class=