Currently, I am utilizing jquery ui dialog as shown below:
$(document).ready(function() {
// creating a course
$('a.openModalBox').click(function(e) {
var href = $(this).attr('href');
if ('#/' == href) {
e.preventDefault();
$('span.modalBoxContent').dialog({
modal: true,
resizable: false,
title: 'Notification',
zIndex: 1,
show: 'fast',
hide: 'slow',
width: 600,
height: 90,
position: 'middle'
}).width(600);
}
});
});
The structure of my HTML is as follows:
<a href="#/" class="next openModalBox lessOpacity">
Go forward
<span class="modalBoxContent">
<p style="font-size: .8em; text-align: center;">
Lorem ipsum.<br />
Lorem ipsum <a href="/index/index" class="accessible-link">lorem ipsum</a>.
</p>
</span>
</a>
Additionally, the relevant CSS pertaining to this is:
span.modalBoxContent {
display: none;
}
This implementation functions well when only text is present within span.modalBoxContent. However, when there is HTML code involved, the span does not remain completely hidden. In that scenario (refer to the HTML above), the link becomes visible.
Why does this occur and how can it be resolved?