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

  • 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.

    Monday, November 26, 2012 10:53 AM


All replies

  • Hi,

    You could use jquery dialog to do that.

    #jquery dialog


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com
    Microsoft One Code Framework

    • Marked as answer by Song Tian Friday, November 30, 2012 5:10 AM
    Tuesday, November 27, 2012 2:14 AM
  • I tried, but seems jquery dialog not work ?
    Tuesday, September 3, 2013 2:44 AM
  • 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();

    Sunday, April 13, 2014 12:38 PM