Glyphicons are not loaded in modal (Bootstrap v3.3.6) - bootstrap-modal

I am facing to issue when span used in modal window is not showing the icon, even if in the main page from which I have opened the modal glyphicons are loaded properly.
<span class="text-success h2 glyphicon glyphicon-ok"> Login attempt:</span>
As you can see on background glyphicons are loaded properly.
Any idea what I have wrong?
Thanks, Reddy

Related

Bootstrap Modal close button does not close the modal

I am using the pypi.org boostrap modal as explain in the site. Everything work fines fine as expected but the problem is when I click a button for eg addFoo button and I decided to close the modal using either the close button or X button the modal does not close.

Zurb Foundation 6 - Reveal modal won't reopen after close

I am using a reveal modal and populating it using AJAX, following the recommended methods in the Zurb Documentation to do so. The modal appears and populates OK, but if I then close the modal (e.g. click on background) and try to reopen I get a javascript error. I am trying to fix this so I can reopen the modal after close.
I have tried adding the option "data-reset-on-close" to the modal definition to ensure that the modal is reset when it closes, but this does not help.
Here is how the modal itself is defined.
<div class="reveal" id="edit_modal" data-reveal data-reset-on-close="true">
Here is the javascript I am using to trigger the modal (and load the javascript. The modal fires when I click on a <div> with ID "load_modal".
$("#load_modal").click(function() {
var $modal = $('#edit_modal');
$.ajax("/_modal_content/edit_modal")
.done(function(resp){
$modal.html(resp).foundation('open');
});
});
The aim is to allow the user to close then reopen the modal as required. Right now it opens once without problem, but it will not open a second time.
On attempting to open the second time a javascript error is reported:
app.js:65 Uncaught TypeError: t.html(...).foundation is not a function
at Object.<anonymous> (app.js:65)
at l (<anonymous>:3:6477)
at Object.fireWith [as resolveWith] (<anonymous>:3:7245)
at r (<anonymous>:4:10371)
at XMLHttpRequest.<anonymous> (<anonymous>:4:16224)
Hopefully I'm doing something silly and there is an easy fix.
Would be most grateful for any guidance on what I should do to resolve.
There are some tutorials on this that may help:
https://zurb.com/university/lessons/dynamically-update-your-web-pages
and
https://zurb.com/university/lessons/ajaxing-dynamic-content-with-foundation

How to load modal when button from another modal is clicked

I have a modal and in that modal is a button. I want to load another modal when the button is clicked. How am I going to do it. I actually set data-toggle but when I clicked the button, the modal is loaded but cannot be seen. It can only be seen when I closed the parent modal.
You must also dismiss the previous modal with data-dismiss="modal".
Modal 2

Any probable cause why my slider is being covered from other blocks (content,sidebar) even it's working behind them?

I recently add HiSlider im my website.
I am using it at the front page an on 95% page loads the slider is being covered by the blocks of the page (which are supposed to be below,after, the slider).Sometimes on page load everything is working correctly.(I have the slider in an other page too link to a menu.By clicking the menu the slider in this page is working)
Any ideas?
have a look at the CSS z-index property.
#your-hi-slider-id{
z-index: 99;
}
Edit: I see this is not the problem you're having,
Because the page sometimes works, I believe the javascript may be excecuted before the page is ready
function init(){
//initialize your slider here
}
<body onload="init()">

Change width & height of APEX Page

I have a an APEX page which has a button on, when they click the button it opens another page on top of the main page, I'm trying to set the width and height of this popup window. I tried the following in the 'inline' box under the CSS section in the page properties but it doesnt overrule the main CSS like it says its suppose to, can anyone see any problems with it?
.body{
width:200px;
height:200px;
}
I dont really want to set it in the shared componants because i only need this IE window/page to be a specific size.
Will these sizes also set the size of the IE window or just the page?
You can't do this with CSS.
You could try to use the window.resizeTo function as seen here : Javascript set browser window size
Edit your popup page, and add the code to the "Execute when Page Loads" section: window.resizeTo(200,200);
I tried this in IE8 and firefox and it works.