I am using the modal plugin from Bootstrap and for some reason the backdrop is not showing.
When I check same code on W3Schools I notice a div is generated every time a modal opens:
<div class="modal-backdrop fade in"></div>
I got the exact same code as on W3Schools but this div is not generated on my site.
How can I fix that?
This happened to me when I used the wrong method to open the modal. I had
$('#myModal').show()
when of course it should be
$('#myModal').modal('show')
Another symptom of using the wrong method, in addition to the semi-opaque backdrop not showing, was the close button in the modal also did not work.
Please check whether CSS properties are overridden or not by inspecting <div class="modal-backdrop fade in"></div> element. Mostly this could be a CSS issue caused by an override.
Cannot reproduce this, as the w3 school examples work fine.
Verify the following. This might cause the issue:
It's good practice to put the <div class="modal">.. at the end of
the file or before </body>
If any other css class is overriding the modal-backdrop class
if jquery and bootstrap JS are added properly
Get the modal from
http://getbootstrap.com/javascript/#modals-examples
Related
I am using Material Design Lite on a project and I have some mdl-tab tabs in my settings page. However, some of the settings are only useful if certain conditions are met. I would like to have a tab which is disabled unless the conditions are met.
This is what I'm doing now, which doesn't work:
<div class="mdl-tabs__tab-bar">
Display
Device
Measurement
</div>
Is there any way to do this? If so, how?
The project is in Cordova. So HTML, CSS, Javascript and JQuery answers are all welcome.
I just solved similar problem in my project. I know i am a bit late but I hope that this will maybe help someone in the future.
Render your page without classes or text.
<div class="mdl-tabs__tab-bar">
Display
<a id=deviceTab href="#deviceSettings"></a>
<a id=measurementTab href="#measSettings"></a>
</div>
You should add listener on input(needed for your conditions) and when the conditions are met just add class (mdl-tabs__tab) and text (Device, Measurement).
You can do that with jQuery
$("#deviceTab").addClass("mdl-tabs__tab").text("Device");
$("#measTab").addClass("mdl-tabs__tab").text("Measurement");
If user deletes information needed you can just remove text and class again and he wont be able to click on tab.
<div class="mdl-tabs__tab-bar">
Display
<a id="deviceTab" href="#deviceSettings" class="mdl-tabs__tab">Device</a>
<a id="measTab" href="#measSettings"class="mdl-tabs__tab">Measurement</a>
</div>
You can achieve this by removing the href attribute from the tag while still leaving the classes and link text. This will keep the tab looking like a tab and when you want to enable it just add the href with the id of the tab panel you want to activate.
I was messing around with Bootstrap and created a page which has a simple navigation menu. I wanted to add modal for one of the links, which already has a tooltip.
And I did add the modal to li like this,
data-toggle="modal" data-target="#SettingsModal" data-toggle="tooltip"
Surprisingly, its working. It doesn't make much sense. Because at least one data-toggle has to be neglected.
I know that it is better to wrap it inside an element which has tooltip. My question is, how is this working?
It's working because the Bootstrap data attributes use separate jQuery selectors to "activate" the various components.
Since
$('[data-toggle="modal"]') and $('[data-toggle="tooltip"]') are both referenced in the Bootstrap JS code, both modal and tooltip components are working.
I am using bootstrap modal for my website. Recently, I used a jQuery plugin to build nav bar and some problems showed up. First, after I use jQuery.noConflict(), the program not recognize $ anymore and I have to replace all $ which jQuery. Second, when execute the command .modal("show"), the modal not showing completely, the whole screen is fade and I can type anything to modal's inputs. Here the screen capture:
Can anybody explain to me what happened here? Thanks very much.
It seems their is a problem with the css. Make sure that you are loading bootstrap css only once.
I´m trying to use a Bootstrap 2.3.2 Carousel to display an item pictures. The user can get a list of items. When he clicks on a concrete item, some detailed info is displayed in the same view. The moment the user clicks on the same item again, the info is hidden (more or less like on an accordion, just to make you understand). Part of these detailed info is a carousel with the item photos.
When I first click on an item, the carousel is working perfectly. It is loaded. The pictures are displayed, and it iterates over the pictures.
However, when I click to hide the details, and click to show again, the carousel doesn´t work anymore. I can inspect the data, and I see the pictures info is there. However, nothing is shown.
I know it is quite difficult to find out the cause of the problem without code, but I have tried to reproduce the same scenario in a plunker, but I´m not able to do it. In my plunker is working.
Any suggestions?
UPDATE:
My carousel code:
<div class="row-fluid info-section">
<div class="span12">
boatSelected.mainPhoto={{boatSelected.mainPhoto | json}}
boatPhotos={{boatPhotos | json}}
<img src="img/nophoto.jpg" ng-hide="boatSelected.mainPhoto">
<div id="boatCarousel" class="carousel slide" ng-show="boatSelected.mainPhoto">
<carousel interval="30000">
<slide ng-repeat="boatPhoto in boatPhotos">
<img src="//{{S3_BUCKET}}.{{PHOTO_SERVER_URL}}/img/boats/{{boatSelected.id}}/{{boatPhoto.id}}.{{boatPhoto.mime}}" style="margin:auto;">
</slide>
</carousel>
</div>
</div>
</div>
UPDATE
I have to apologize for the confusion. According to the colleagues comments, I have reviewed the code, and I have realized I´m not working with Bootstrap 2.3.2 Carousel, but as you can see in the code above, I´m working with UI Bootstrap Carousel directive that I already integrated. But, the problem is still the same. It´s not working in the scenario depicted above.
UPDATE 2:
I´m getting completely crazy with this. I have updated the plunker with some more detailed code. NOTE: The carousel is not working in Plunker (in my application, first time it´s working perfectly). Maybe when it works, I will be able to reproduce the issue. The point is, each time I click on a boat, some functions in controller are called. After first time, it doesn´t display the carousel anymore, however, the data are there.
http://plnkr.co/edit/OzZmlCNT7M5MeT5EANy5?p=preview
No jQuery (Bootstrap or other JS) plugins will work correctly with Angular without wrapping them in a directive. That's because the DOM is being torn down and recreated and jQuery plugins don't know about this, so they don't know when to run.
A directive solves this using a post-compile hook called a "link function". You'll have to learn how to create a directive, or find one that's made already, in order for other JS plugins to work correctly. Think of the link function similarly to jQuery's $(document).ready() function.
I am using CKEditor Version 3.3.1, Also tried latest version 4.3 but facing same problem.
Now the problem is, Whenever I try to load the CKEDITOR to the Textarea Which is located inside the jQuery Dialog box, CKEditor loads properly, but When I try to create a hyper link, It open up the Link Popup box, but Link options (Input field, dropdown etc) is not working.
For reference see the attached screen shot.
Please guide me, how to resolve this issue.
I had the same problem, but in my case Textarea belonged to a modal window.
Removing "tabindex="-1"" was fixed.
Here is the solution for the above problem, thats worked for me.
Solution for CKEditor Popup in a jQuery Dialog Box
I have solved it by setting z-index to a bigger value than my bootstrap modal:
.ck.ck-balloon-panel {
z-index: 1050 !important;
}
I had the same issue. Fixed using the following thread. It saved me lots of time:
Twitter bootstrap problem with ckeditor dialogue in modal
In my case, the problem is related to modal structure which text area is located inside the this jQuery Dialog box that has tabindex attribute like below:
<!-- Modal -->
<div class="modal" tabindex="-1" role="dialog" id="modal">
// text area is here in this modal body
</div>
By removing tabindex="1" you can change link textbox in Link Popup box in ckeditor.
Same issue here, but using other frameworks.
In short I was using modal divs.
Then I found out that one of them had a tabindex attribute defined. Once I removed it CKEDITOR started working as expected.
No modal should have tabindex attribute defined.