How to display a flyout in the center of an anchor in JS?

Question

Hello, Dear all,

Is there a way to put a flyout in the center of an anchor? For example, if there is a full screen program, and I want to display a flyout whose anchor is it, how could the flyout be displayed at the center of the screen? I mean not at the bottom or top, but just the center of the screen.

Thank you all in advance.

Answer 1

Hi,

You could use jquery dialog to do that.

#jquery dialog

http://jqueryui.com/dialog/

---

Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact [e-mail]
Microsoft One Code Framework

Answer 2

I tried, but seems jquery dialog not work ?

Answer 3

I was after same thing without jquery.  It could be done by simulating one.

1. set css for flyoutdiv as min-height: 100%; min-width: 100% background-color: transparent
2. put the contents in a div and position it in center
3. attach an onclick eventlistener to the flyoutdiv like

function(evt) {
if(evt.currentTarget == evt.target) flyout.hide();
}