Bootstrap Modal in Appex

Hi,

I have the following line of html I need to modal in javascript in order to get the closing cross in my bootstrap modal dialog.

Bootstrap uses >×  in order to show the multiplication cross character

I use the following script to make the buttton.

var aModalTopCloseButton = this.elementNameClass("button","close");
      aModalTopCloseButton.setAttribute("data-dismiss", "modal");
var aSpan1 = document.createElement("span"); 
      aSpan1.setAttribute("aria-hidden", "true");
      aSpan1.appendChild(document.createTextNode("&times"));

aModalTopCloseButton.appendChild(aSpan1 );
aModalTopCloseButton.appendChild(this.spanWithClassText("sr-only","Close") ); 

The above however doesn't work it'll show me the modal like this.

While it should look like this:

I am pritty sure there is a small detail I don't get.

Thanks for any help.

Maarten MOSTERT