Below is the HTML code:
<a href="#/" class="next openModalBox lessOpacity">Move forward</a>
<div id="modalBoxContent">
<p style="font-size: .8em; text-align: center;">
You have successfully completed the study part of the training.
To finish the training, you need to successfully pass the <a href="/index/index" class="accessible-link">final test</a>.
</p>
</div>
And here is the JS code:
$(document).ready(function() {
// create course
$('a.openModalBox').click(function(e) {
var href = $(this).attr('href');
if ('#/' == href) {
e.preventDefault();
$('#modalBoxContent').dialog({
modal: true,
resizable: false,
title: 'Warning',
zIndex: 1,
show: 'fast',
hide: 'slow',
width: 600,
height: 90,
position: 'middle'
}).width(600);
}
});
});
The issue arises with the appearance of the dialog window. The HTML code for it is shown below:
<div style="width: 1920px; height: 862px; z-index: 2;" class="ui-widget-overlay"></div>
<div aria-labelledby="ui-dialog-title-modalBoxContent" role="dialog" tabindex="-1" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" style="display: block; z-index: 3; outline: 0px none; height: auto; width: 600px; top: 381px; left: 655px;">
<div style="-moz-user-select: none;" unselectable="on" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span style="-moz-user-select: none;" unselectable="on" id="ui-dialog-title-modalBoxContent" class="ui-dialog-title">Warning</span>
<a style="-moz-user-select: none;" unselectable="on" role="button" class="ui-dialog-titlebar-close ui-corner-all" href="#"><span style="-moz-user-select: none;" unselectable="on" class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div class="ui-dialog-content ui-widget-content" style="display: block; width: 600px; min-height: 0px; height: 36px;" id="modalBoxContent">
<p style="font-size: 0.8em; text-align: center;">
You have successfully completed the study part of the training.
To finish the training, you need to successfully pass the <a href="/index/index" class="accessible-link">final test</a>.
</p>
</div></div>
This is how it appears:
The dialog window displays correctly when containing only text. However, it becomes distorted when there is HTML content within it.