I am trying to display an AngularUI based Bootstrap Modal window which has embedded YouTube videos in iframes. Everything works fine but while loading the modal window flickers at least once before the entire modal content is loaded.
From whatever I researched I can understand that Bootstrap modal opens up before the contents are loaded completely and the iframes in which the Youtube videos are embedded is causing it.
Any idea why this is happening and suggestions to avoid the flicker will be appreciated.
adding ng-cloak to the template used for the dialog fixed the same issue for me.
Related
I am new to react and I am using a modal dialog. It is visible when I am inspecting it on browser but not visible generally. What could be the issue?
(Can't paste code since it is work related)
Are you using css z-index at all ? I would use createPortal() approach see the React docs to learn how to do that https://reactjs.org/docs/portals.html
I have angular UI bootstrap's carousel directive implemented on my site. Everything is working fine and suddenly I noticed that whenever I browse to other sites, leaving my site open in one tab and come back to my site again, the pager and carousel controls stop working. It's strange but I have set my carousel to auto rotate and it also stops.
The carousel won't work until I refresh. First, I thought I had some bugs in my code, but when I tried their own slider from the https://angular-ui.github.io/bootstrap/#/carousel website, also shows the same behavior.
Any thoughts or fixes on this?
For the code, please visit this link :
https://angular-ui.github.io/bootstrap/#/carousel
And scroll down to the Carousel section and click Edit in Plunker.
Thankyou!
This is a known issue and is under investigation.
I'm curently working on this piece of code, since i have a loader integrated in my site, the loader clashes with the modals, so i open the modal from my controller. my problem is if click open the modal it opens behind the current modal, whereas i want it displayed on top.
You should change the z-index css property for the modal and/or the loader.
Most probably you should add z-index to your main modal popup div.
You can try ngBootbox. It's a library for popups.
I read in a lot of the forums and support websites about modal used/defined in angularJS apps.
I don't mean module and surely not model.
Can anyone tell me more about what the modal is?
Thanks,
The Modal plugin is a dialog box/popup window that is displayed on top of the current page:
From http://www.w3schools.com/bootstrap/bootstrap_modal.asp
You can use it through angular with bootstrap for angular here https://angular-ui.github.io/bootstrap/
I have this issue here with the IE/Safari browsers, I have an IFrame with a PDF as it's content, and when i try to show a modal dialog it opens under the IFrame not above it, I tried to change the IFrame z-index/Position with no luck, and it seems to be an issue with the PDF plugin itself because I can see the IFrame borders behind the modal dialog
Any suggestions would be much appreciated :)
I have an update:
Ok, I am now positive that this is a PDF plugin issue not the IFrame, the IE put the PDF on top and no other component is allowed to overlay it
While i was searching I came a cross the PDF.js, it's very nice and doesn't rely in the browser PDF plugin, the only issue is that you cannot give it a stream to display!!! you have to provide a path to the PDF file on your server, which won't work for me
will keep you guys posted :)
I've ended up using the ViewerJS plugin to view the pdf documents inside the IFrame, it's very simple and you can embed it in your application, mine was MVC, you also can pass a stream or an url to your document, here is the link for their website, forgot to mention that it's for free :)
http://viewerjs.org/