Just to expand on [JCasso's great answer][jcasso], you can handle this all in JavaScript:



    $("a").click(function (event) {
        event.preventDefault();
        var page = $(this).attr("href");
        var title = $(this).text();
        $('<div></div>')
            .html('<iframe style="border: 0px; " src="' + page +
                  '" width="100%" height="100%"></iframe>')
            .dialog({
                autoOpen: true,
                modal: true,
                height: 800,
                width: 400,
                title: title
        });
    });

Now any links on the page will be opened in inside of an `iframe` in a `dialog` box.

[Working Demo in jsFiddle][fiddle]
====

[jcasso]: https://stackoverflow.com/a/2015596/1366033
[fiddle]: http://jsfiddle.net/KyleMit/82QYd/

Can I use a JQuery [Dialog][1] to open up an external web page, and if so - how?

Essentially, I want to replicate the abilities of LightWindow using JQuery (LightWindow is based on scriptalous).

www.stickmanlabs.com/lightwindow/index.html

Ideally, I want to use something that is apart of the JQuery core. If it need to be a JQuery plug-in, that's fine but I would really like to have it be apart of the core functionality of such features already exist.


  [1]: http://jqueryui.com/demos/dialog/

JQuery: Can I use a Dialog to open up an external web page?

Add the event handler when the input is created, like so ( and don't use live() ):

    this.input = $("<input>")

              .appendTo(this.wrapper)
              .val(value)
              .attr("title", "")
              .addClass("custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left")
              .autocomplete({
                  delay: 0,
                  minLength: 0,
                  source: $.proxy(this, "_source")
              })
              .tooltip({
                  tooltipClass: "ui-state-highlight"
              }).on('mouseup', function() {
                  $(this).select();
              });

[**FIDDLE**](http://jsfiddle.net/KyleMit/Fjj3J/1/)

And yes, you have to use `mouseup` to get the selection working.

I'm using the `jQuery UI` `AutoComplete` `Combobox` option as illustrated [here](http://jqueryui.com/autocomplete/#combobox).  This will start filtering the shown results immediately when you begin typing, but if an element is already selected, then typing (without manually removing the contents) will just append onto the string and typically not find anything.  

I'd like the text to be selected by default whenever the input field receives focus, but am having trouble figuring out where to add that logic into the script.

Here's a [jsFiddle](http://jsfiddle.net/KyleMit/Fjj3J/) with this example on it.

Normally, to select the text in an input element when it recieves focus, you could execute the following, like in [this](https://stackoverflow.com/questions/6124394/select-all-text-on-focus-using-jquery/6124595#6124595) SO question:


    
    //Select all text in Cost Rate Text Boxes when they have focus
    $(document).ready(function () {
        $(".CostRateTextBox").live('mouseup', function () {
            $(this).select();
        });
    });
    
The `_createAutocomplete` function in the script is where the input box is created.  Is it possible to do this near the following line?



    this.input = $("<input>")

Select Text on Focus of Input Element Generated by jQuery UI

There are a couple things that are helpful for answering this question.  One is to take a look at [JQuery-UI's own documentation](http://api.jqueryui.com/autocomplete/#event-select) on this function:



    // Initialize the autocomplete with the select callback specified:
    $( ".selector" ).autocomplete({  select: function( event, ui ) {}}); 
    // Bind an event listener to the autocompleteselect event:
    $( ".selector" ).on( "autocompleteselect", function( event, ui ) {} ); 


Essentially, what needs to happen, is something needs to signal a callback when the item has been selected (either from the menu or by typing and getting an exact match).

We can do this by modifying the default functionality demonstrated on the [autocomplete](http://jqueryui.com/autocomplete/#combobox) page:



    this._on( this.input, {
      autocompleteselect: function( event, ui ) {
        ui.item.option.selected = true;
        this._trigger( "select", event, {
          item: ui.item.option
        });
      },
      autocompletechange: "_removeIfInvalid"
    });

This code attaches listeneres on the `select` and `change` events and runs the inline defined function and the _removeIfInvalid function whenever those events fire (respectively)

By implementing the following changes we can do a postback when a valid selection has been made:



    //attach listeners
    this._on(this.input, {
      autocompleteselect: "_selectFromMenu",
      autocompletechange: "_removeIfInvalid"
    });
    

**Will get called anytime an item is selected from the menu:**


    
    _selectFromMenu: function (event, ui) {
      ui.item.option.selected = true;
      this._trigger("select", event, {
          item: ui.item.option
        });
      __doPostBack('', '');
    },

**Will get called any time the text changes:**



    _removeIfInvalid: function (event, ui) {

      // Selected an item, automatically valid, post back
      if (ui.item) {
        __doPostBack('', '');
        return;
      }

      // Search for a match (case-insensitive)
      var value = this.input.val(),
        valueLowerCase = value.toLowerCase(),
        valid = false;
      this.element.children("option").each(function () {
          if ($(this).text().toLowerCase() === valueLowerCase) {
            this.selected = valid = true;
            return false;
          }
        });

      // Found a match, post back
      if (valid) {
        __doPostBack('', '');
        return;
      }

      // Remove invalid value...

Here's a [jsfiddle](http://jsfiddle.net/KyleMit/Fjj3J/1/) with the complete code changes, although `__doPostBack` is commented out because it is not being handled by anything

A couple further note:

* I'm calling __doPostBack, but I'm relying on that method being available because of asp.net event handling generated code.
* In order to initialize the combo box, you have to call `$("#combobox").combobox();`.  Make sure that whatever is preforming that operation is still getting called on the return from the post back, otherwise the functionality will not come back.  This is one thing to work past if you're using the code asynchronously in an update panel.

I'd like to post back to the server when my combobox changes value (ideally with an AJAX call in an update panel - but one thing at a time).  I'm using the I'm using the `jQuery UI` [`AutoComplete Combobox`](http://jqueryui.com/autocomplete/#combobox) and, unfortunately, it's interferring with the change event as I'm not changing the drop down list directly.

I'm using the implementation detailed [here](http://www.learningjquery.com/2010/06/a-jquery-ui-combobox-under-the-hood).

Here are some choice snippets 

**HTML Body Code**



    <span class="ui-widget">
        <asp:DropDownList ID="cboLang" runat="server" AutoPostBack="True">
            <asp:ListItem Value="ActionScript">ActionScript</asp:ListItem>
            <asp:ListItem Value="AppleScript">AppleScript</asp:ListItem>
            <asp:ListItem Value="Asp">Asp</asp:ListItem>
        </asp:DropDownList>
    </span>

**Autocomplete Javascript**

This is the autocomplete js that exexutes whenever a selection has been made.  It will always run the function `_removeIfInvalid`



	this._on(this.input, {
		autocompleteselect: function (event, ui) {
			ui.item.option.selected = true;
			this._trigger("select", event, {
				item: ui.item.option
			});
		},

		autocompletechange: "_removeIfInvalid"
	});

**Server Side Code**



    Protected Sub cboLang_SelectedIndexChanged(sender As Object, e As EventArgs) _
            Handles cboLang.SelectedIndexChanged
        'DO OTHER STUFF HERE
        Dim alert = String.Format("alert('{0}');", "Hi")
        ScriptManager.RegisterStartupScript(Me, Me.GetType, "DropDownChange", alert, True)
    End Sub

**Generated Code**

When an ASP.NET renders the page with the attached event, it produces the following code



    <script type="text/javascript">
    //<![CDATA[
    var theForm = document.forms['ctl00'];
    if (!theForm) {
        theForm = document.ctl00;
    }
    function __doPostBack(eventTarget, eventArgument) {
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
        }
    }
    //]]>
    </script>

    <select id="cboLang" onchange="javascript:setTimeout('__doPostBack(\'cboLang\',\'\')', 0)"
        name="cboLang" style="display: none;">

**Question**

Where can I go about making changes to ensure that with each update to the autcomplete input, I can trigger a server event?

Fire DropDownList SelectedIndexChanged event when using JQuery-UI Autocomplete

This appears to be a bug in the way jQuery ships.  You can fix it manually with some dom manipulation on the [`Dialog Open`][open] event:


        
    $("#selector").dialog({
        open: function() {
            $(this).closest(".ui-dialog")
            .find(".ui-dialog-titlebar-close")
            .removeClass("ui-dialog-titlebar-close")
            .html("<span class='ui-button-icon-primary ui-icon ui-icon-closethick'></span>");
        }
    });


[open]: http://api.jqueryui.com/dialog/#event-open

I'm using a custom jQuery 1.10.3 theme. I downloaded every straight from the theme roller and I have intentionally not changed anything.

I created a dialog box and I get an empty gray square where the close icon should be:
![Screen shot of missing close icon][img1]

I compared the code that is generated on my page:

    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <spanid="ui-id-2" class="ui-dialog-title">Title</span>
        <button class="ui-dialog-titlebar-close"></button>
    </div>

To the code generated on the [Dialog Demo page][dialogDemo]:

    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <span id="ui-id-1" class="ui-dialog-title">Basic dialog</span>
        <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
            <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
            <span class="ui-button-text">close</span>
        </button>
    </div>

### EDIT
The different parts of the code are **generated** by jQueryUI, not me so I can't just add the span tags without editing the jqueryui js file which seems like a bad/unnecessary choice to achieve normal functionality.

Here is the JavaScript used that generates that part of the code:

    this.element.dialog({
        appendTo: "#summary_container",
        title: this.title(),
        closeText: "Close",
        width: this.width,
        position: {
            my: "center top",
            at: ("center top+"+(window.innerHeight*.1)),
            collision: "none"
        },
        modal: false,
        resizable: false,
        draggable: false,
        show: "fold",
        hide: "fold",
        close: function(){
            if(KOVM.areaSummary.isVisible()){
                KOVM.areaSummary.isVisible(false);
            }
        }
    });

I'm at a loss and need help.

  [img1]: http://i.stack.imgur.com/PjMs8.png
  [dialogDemo]: http://jqueryui.com/dialog/#default

jQuery UI Dialog - missing close icon

You need to enable `droppable` on the objects you intend to drag and use `revert` there.  

Like this:



    $(".draggable2").droppable({
        greedy: true,
        tolerance: 'touch',
        drop: function (event, ui) {
            ui.draggable.draggable('option', 'revert', true);
        }
    });

See this [**fiddle**](http://jsfiddle.net/KyleMit/HG9FA/2/) for a demo

Also see this [SO](https://stackoverflow.com/a/6087928/1366033) question

In HTML file, I would like to drag one item and dropped to the target,suppose I would like to drop another item to the same position, at that time both items should be override.If both items are overrides the new item should be revert to original position.Can any one help me how to revert the new item to the original position.
Here is my code.



    $(function () {
        $(".draggable2").draggable({
            revert: "invalid"
        });
        $("#droppable").droppable({
            drop: function () {
                //var xPos = offset.left;
                //var yPos = offset.top;    
                //alert( $(this).position().left ); 		
                $(this).find("p").html("Yes,it is dropped!");
            }
        });
    });

JSFiddle is : [here][1]


  [1]: http://jsfiddle.net/HG9FA/

-Thanks.

jQuery UI - Revert a jQuery draggable object back to its original?

You can read more about it on these SO questions dealing with `conditional revert` ([here][SO1], [here][SO2], and [here][SO3]), but this is different enough to warrant it's own question.

Basically you want to set the [`revert option`][revert] to `'invalid'` on your [`.draggable()`][draggable] object, and it'll go back if it wasn't successfully dropped onto a droppable, like this:



    $(".draggable").draggable({ revert: 'invalid' });

Then in your [`.droppable()`][droppable] you can set what's considered valid for a drop using the [`accept option`][accept].  Accept can be implemented as a function that returns `true` or `false` based on whether or not it will accept elements. Our droppable declaration will look like this:



    $(".droppable").droppable({ 
        accept: function(drag) {
            var dropId = $(this).attr('data-id');
            var dragId = $(drag).attr('data-id');
            return dropId === dragId;
        }
    });

In this example, i'm using data attributes to match drag and drop elements, but you can do it however you like.  Here's some sample **HTML**:



    <div class="draggable" data-id='a'>draggable a</div>
    <div class="droppable" data-id='a'>droppable a</div>

Here's a serious demo:

[jsFiddle][fiddle]
====

Here's a playful demo:

[Fun Fruit Mix and Match Example][fun]
====

[revert]: http://jqueryui.com/droppable/#revert
[draggable]: http://jqueryui.com/draggable/
[droppable]: http://jqueryui.com/droppable/
[accept]: http://api.jqueryui.com/droppable/#option-accept
[SO1]: https://stackoverflow.com/q/4302882/1366033
[SO2]: https://stackoverflow.com/q/3088485/1366033
[SO3]: https://stackoverflow.com/q/1444469/1366033
[fiddle]: http://jsfiddle.net/KyleMit/Wdyd6/
[fun]: http://jsfiddle.net/KyleMit/Wdyd6/3/

In html I have a list of 10 draggable `div`s called *piles* and another list of 10 droppable `div`s called *stacks*. Each *pile* will have unique id that will match with one of the *stack* divs.


* If the *pile* **does not** match with the *stack* the draggable div should revert to its default position.
* If the pile **does** match with the *stack* the draggable div will be placed inside that stack.


>     After the pile has matched the stack when i drag out the matched
>     *pile* from that stack it should automatically reposition to the exact list of *piles**

jquery drag and drop revert options

The problem rests in the fact that the [*jQuery-UI Dialog*][dialog] has created a new stacking context and so changes to the `z-index` of the `#content` element will only show up relative to it's current stacking context.

For proof, add the following css, and you'll still see the `#content` div display **above**  the dialog, which has a `z-index` of `100`. --> i.e. **Z-indexes are not absolute!** ... [jsFiddle][fiddle]



    #content { z-index: 0 !important; }

----

From [**What No One Told You About Z-Index**][z-index]:

> Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order.  That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!
>
>New stacking contexts can be formed on an element in one of three ways:
>
>* When an element is the root element of a document (the <html> element)
>* When an element has a position value other than static and a z-index value other than auto
>* When an element has an opacity value less than 1

------

The problem is [Bootstrap Tour][tour] doesn't really have a good way of identifying this.  When they start a tour on an element, they apply:

* A full screen black `tour-backdrop` with a z-index of `1009`, 
* A white `tour-step-background` behind the object with a z-index of `1010`
* and apply a z-index to the current tour element of `1011`

...but the last `z-index` has no effect since our object is already in a stacking context.  It is just positioned higher than any of the other elements within that stack (which it already was).  Incidentally, that's why removing the `z-index` from `ui-front` results in the proper appearance because it frees the element from its current stack.

---

Here's what Bootstrap Tours **should** be doing, and we'll do manually with DOM manipulation.

The problem is that they are trying to position the elements relative to one another with z-indexes, but anytime the tour object is in a stacking context different from the `.tour-step-background` and `.tour-backdrop`, this will fail.  

Solution?  Place the elements you're generating inside the same stacking context!
====

Here's a simplified markup tree

* Body
     * Tour background **(normally goes here)**
     * New stacking context
         * Tour object
         * Tour background **(should go here)**

To override this, we'll plugin to the tours `onShown` method and move the backdrops ourselves:

In **JavaScript**, when creating a tour, we'll do the following:

    var t = new Tour({
        backdrop: true,
        onShown: function(tour) {
            var stepElement = getTourElement(tour);
            $(stepElement).after($('.tour-step-background'));
            $(stepElement).after($('.tour-backdrop'));
        }
    });
     
    function getTourElement(tour){
        return tour._steps[tour._current].element
    }

This uses jQuery's [`.after()`][after] DOM manipulation to move the backdrop to the same stacking context as our tour object.

Also, we'll need to position both our tour backdrop elements as `fixed` instead of `absolute`, so they don't try to squeeze inside of our dialog.  We can do that with the following **CSS**:



    .tour-step-background, 
    .tour-backdrop {
        position: fixed;
    }

[Working Demo in Fiddle][fiddleDemo]
====

Which should look like this:

![demo][demo]

[dialog]: http://jqueryui.com/dialog/
[fiddle]: http://jsfiddle.net/KyleMit/v3QCW/1/
[z-index]: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/

[tour]: http://bootstraptour.com/
[after]: http://api.jquery.com/after/
[fiddleDemo]: http://jsfiddle.net/KyleMit/DYNbj/
[demo]: http://i.imgur.com/gftRZxm.png

Basically I can get [Bootstrap Tour][1] working with the most basic example, but when targeting an element in a jQuery dialog the highlight covers up the element.

    var t = new Tour({
        backdrop: true
    });
    
    t.addStep({
        element: "#content",
        title: "Title",
        content: "Content"
    });
    
    t.start();

Here is a [jsFiddle example][2] of what I mean.

![Bootstrap Tour with a jQuery Dialog][3]

The highlight element should be behind the targeted element so that the text is still visible.

I think the issue is the z-index of the elements. It should be dialog -> highlight -> element, but instead it looks like it's dialog -> element -> highlight.

The z-index of the dialog is 100, the highlight is 1010 and the element is 1011, which I believe should be correct.

I can make it work by explicitly removing the z-index on the `.ui-front` jQuery UI class, but that doesn't seem like the best solution.

Any ideas why the default styling doesn't work if the z-index's are correct?

  [1]: http://bootstraptour.com/
  [2]: http://jsfiddle.net/FJPGL/1/
  [3]: http://i.stack.imgur.com/Q5frl.png


How do I get Bootstrap Tour to work with a jQuery dialog?

I have a `LinkButton` that executes on the server and changes the page.  Historically, I've had a `confirm` message box that executes `OnClientClick` to ensure the user would like to navigate away.

So far it looks like this:

**ASP.NET**:



    <asp:LinkButton runat="server" ID="ChangePage" Text="Change page"
                    OnClientClick="confirm('are you sure you want to change page?');" 
                    OnClick="Navigate" >
        Change Page
    </asp:LinkButton>

**HTML Output**:



    <a id="MainContent_ChangePage" 
       onclick="confirm('are you sure you want to change page?');"
       href="javascript:__doPostBack('ctl00$MainContent$ChangePage','')" >
        Change page
    </a>

This all works fine like this. The trouble is that I'm trying to replace all confirm boxes with a prettier jQuery-UI implementation like this:



    window.confirm = function (message, obj) {
        $('<div/>')
        .attr({ title: 'Webpage Confirm'})
        .html(message)
        .dialog({
            resizable: false,
            modal: true,
            width: 500,
            buttons: {
                "OK": function () {
                    __doPostBack(obj, '');
                    $(this).dialog('close');
                    return true;
                },
                "Cancel": function () {
                    $(this).dialog('close');
                    return false;
                }
            }
        });
    };

I believe this has to do with the fact that the `confirm` dialog operates *synchronously*, while jQuery dialogs occur *asynchronously*.  However, I thought setting `modal: true` would cause it to wait for a response.

How can I override `window.confirm` to get consistent behavior?

Prevent Postback with custom jQuery confirm implementation on asp:LinkButton

Jquery UI actually exposes this functionality for you and will even return a bonafide `date` type.

Just call [`.datepicker("getDate")`][getDate]

Also, Unobtrusive JavaScript would usually prefer that you not add javascript inline to your HTML.  Instead, you can attach a listener to your datepicker with the `change` event handler

JavaScript:

    $("#datepicker").change(function() {
        var date = $(this).datepicker("getDate");
        $("#placeholder").text(date);
    });

##[Working Demo in Fiddle][fiddle]

[getDate]: http://api.jqueryui.com/datepicker/#method-getDate
[fiddle]: http://jsfiddle.net/KyleMit/SXmZ3/

I'm trying to get the date from the datepicker in jQuery UI and then display the date selected by the user somewhere on the page. The selected date already displays inside the input field of the datepicker, which is great, but i also want to display that exact same value elsewhere on the page inside a div tag.

Get date from datepicker and display it in a div

What's not working about your current implementation?

##[Working Demo in Fiddle](http://jsfiddle.net/KyleMit/5cAH2/)

This should be doing the trick:



    .ui-tooltip {
        border-radius: 25px;
    }

###Screenshot:

[![screenshot][screenshot]][fiddle demo]

Make sure to check for browser compatibility as this won't work in IE8:  
http://caniuse.com/border-radius


[fiddle demo]: http://jsfiddle.net/KyleMit/5cAH2/show/light
[screenshot]: http://i.imgur.com/sJ3mTRP.png


This is the css in my stylesheet. Weather I use ui-tooltip or make my own custom tooltip class and specifiy it in the tooltip initialization, it doesnt round the corners. I'm assuming there is some css priority conflict, but I am completely new to css and not sure of its underworkings yet.

I really just need round corners.

    .ui-tooltip {
      position: absolute;
        background: #f9a235;
        color: #fff;
        padding: 6px 0px; 
        border-width: 1px;
        border-radius: 25px;
      }

How do I make rounded Jquery UI tooltips?

By Default, jQuery UI will not add draggable to elements of type `button`.

According to the [API for the `Cancel` Option][Cancel Option]:

>Prevents dragging from starting on specified elements.  
>**Default**:<code>"input,textarea,<i>button</i>,select,option"</code>

If you'd like to be able to use Draggable on buttons, you have to override the cancel option by specifying `cancel: false`



<pre><code>$('.btn.verticalButton').draggable({<b>cancel:false</b>});
</code></pre>

#[Working Demo in jsFiddle][jsFiddle]

Or you can try changing your `button` element to an `a`nchor element:  



    <a class="btn btn-default">B1</a>

###[Anchor Test Fiddle][test Fiddle]

Also, the `helper` option function you're using seems to be interfering with the drag operation.  
In order to use [`connectToSortable`][connectToSortable], you should use `helper: "clone"`.


[Cancel Option]: http://api.jqueryui.com/draggable/#option-cancel
[connectToSortable]: http://api.jqueryui.com/draggable/#option-connectToSortable
[jsFiddle]: http://jsfiddle.net/KyleMit/8g62E/
[test Fiddle]: http://jsfiddle.net/KyleMit/8g62E/5/

I'm using: bootstrap.min, jquery-1.10.2, jquery-ui-1.10.4.min.
Using these libs I want to provide drag'n'drop feature. Bootstrap buttons should be draggable, but they aren't. Console log is clear. jQuery & jQuery UI are loaded & works.


Script:

    <script type="text/javascript">

        $(document).ready(function() {
            $('.btn.verticalButton').draggable({
                connectToSortable: '.container',
                containment: 'document',
                helper: function(){ return $(html); }
            });
            $("#droppable").droppable({
                drop: function (event, ui) {
                    $(ui.draggable).clone().appendTo(this);
                    $(ui.draggable).remove();
                }
            });
        });

    </script>

Html: 

    <div class="container">
       <div class="row">
          <div class="col-sm-6 col-md-6">
             <div class="panel panel-info text-center">
                <div class="panel-heading  text-center">Buttons</div>
                <div class="btn-group-vertical">
                   <button class="btn verticalButton">B1</button>
                   <button class="btn verticalButton">B2</button>
                   <button class="btn verticalButton">B3</button>
                </div>
             </div>
          </div>
       </div>
    </div>

jQueryUI and Bootstrap buttons

The bootstrap metaphor for displaying buttons next to inputs is to use an [`input-group`][1] like this:



    <div class="input-group">
      <input type="date" class="form-control" placeholder="Date" />
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-calendar" ></span>
        </button>
      </span>
    </div>

You can tweak your script to format the output to add these classes and html structure by wrapping the contents like this:





    $(".jqueryui-marker-datepicker")
      .wrap('<div class="input-group">')
      .datepicker({
        dateFormat: "yy-mm-dd",
        changeYear: true,
        showOn: "button"
      })
      .next("button").button({
        icons: { primary: "ui-icon-calendar" },
        label: "Select a date",
        text: false
      })
      .addClass("btn btn-default")
      .wrap('<span class="input-group-btn">')
      .find('.ui-button-text')
      .css({
        'visibility': 'hidden',
        'display': 'inline'
      });



    <link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

    <input type="text" class="jqueryui-marker-datepicker form-control">



---

## Alternative w/ Bootstrap

That being said, this is a pretty convoluted way to do this.  I'd add a native bootstrap glyphicon instead of trying to force the button to display correctly.  It's also pretty uncommon to mix jQuery-UI and Bootstrap as there is a lot of overlap in functionality and they don't always play nice together.  I would recommend looking into just extending bootstrap with a datepicker plugin.

Here's an example using [tag:bootstrap-datepicker]





    $('.datepicker').datepicker({});

    // 
    $('.datepicer-icon').on('click', '.btn', function(e) {
      $(e.delegateTarget).find('.datepicker').focus();
    });



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>

    <div class="container" >

      <h3>With Input Group</h3>
      <div class="input-group datepicer-icon">
        <input type="text" class="form-control datepicker" placeholder="Date" />
        <span class="input-group-btn">
          <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-calendar" ></span>
          </button>
        </span>
      </div>

      <h3>With Feedback</h3>
      <div class="form-group has-feedback">
        <input type="text" class="form-control datepicker" placeholder="Date" />
        <i class="glyphicon glyphicon-calendar form-control-feedback"></i>
      </div>

    </div>



[1]: http://getbootstrap.com/components/#input-groups

In an MVC 5 project, with the default bootstrap layout, I am using the following code to set all inputs of a certain class to jQuery UI Datepicker widgets:

    $(".jqueryui-marker-datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        changeYear: true,
        showOn: "button"
    }).next("button").button({
        icons: { primary: "ui-icon-calendar" },
        label: "Select a date",
        text: false
    });

Here is the HTML that is rendered by Razor and jQuery UI after the above call executes, minus some `aria` and validation `data` attributes:

    <div class="form-group">
        <label class="control-label col-md-2" for="Time">Date</label>
        <div class="col-md-10">
            <input class="form-control jqueryui-marker-datepicker hasDatepicker valid" id="Time" name="Time" type="text" value="2015-05-02">
            <button type="button" class="ui-datepicker-trigger ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" role="button" title="Select a date">
                <span class="ui-button-icon-primary ui-icon ui-icon-calendar"></span><span class="ui-button-text">Select a date</span>
            </button>
            <span class="text-danger field-validation-valid" data-valmsg-for="Time" data-valmsg-replace="true"></span>
        </div>
    </div>

The problem with this is that datepicker button appears below the date input. This is because the bootstrap `.form-control` class makes gives the input a `display: block`. If I edit this in Chrome's console to `inline-block` the button appears immediately to the right of the input, exactly where I want it.

Now I could add a new css rule as follows:
 
    .form-control.jqueryui-marker-datepicker {
      display: inline-block;
    }

but I'm just not sure if this is the neatest way to do this, with the least impact on all the layout magic that bootstrap is doing. 



How do I get a jQuery UI Datepicker button inline with the input?

### Problem

The script currently shows a brief [Flash of Unstyled Content (FOUC)][1] because you're tapping into the **shown** event which, according to the [Bootstrap Modal Events][3]:

> `show.bs.modal` is fired when the modal has been made visible to the user  
(will wait for CSS transitions to complete). 

The only reason it *appears* to work after the first try, is because the `position()` function will leave the position as part of the markup

So this:



    <div class="modal" >

Will become this:



    <div class="modal" style="top: 34px; left: 104px;" >

And it will pick up where it left off and *then* attempt to reposition.  However, this is only good when the modal doesn't need to change between requests.

### Solution - Part 1

Instead, of waiting until it's rendered, you need to tap into the **`show.bs.modal`** event which will fire before the element is shown and reposition at this time.

The rub, is that at this moment in time, the modal is hidden, and according to the documentation on [jQuery UI - Position][2]:

> jQuery UI does not support positioning hidden elements.

### Solution - Part 2

As a workaround, according to this [Stack Overflow question on jQuery ui positioning keep changing][4], you can style the modal as an invisible block to help in calculating position:



    .modal {
       display: none,
       visibility: visible
    }

### Solution - Part 3

Additionally, there's no need to re-attach the `.on()` listener for every click of the button.  That initialization should happen in the beginning and then rely on the event handling to call the correct method.  This does introduce the additional problem that you can no longer pass the button into the event handler through the function scope.  

So instead you need to add the calling button to the modal as a data parameter like this:



    $('#MyModalWindow').data("source", $(this))

So you can read it in the event handling like this:



    .position({
       my: 'left top',
       at: 'right bottom',
       of: $(this).data("source")
    })

### Here's a demo in Stack Snippets





    $('#MyModalWindow').on('show.bs.modal', function(e) {
      $(this)
      .css({
        'display': 'block',
        'visibility': 'hidden'
      })
      .position({
        my: 'left top',
        at: 'right bottom',
        of: $(this).data("source")
      })
      .css({
        'visibility': 'visible'
      });
    })

    $('.my-element').click(function(){
      $('#MyModalWindow')
        .data("source", $(this))
        .modal();
    });



    .modal-backdrop.modal-backdrop {
      background-color: transparent
    }



    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>


    <button type="button" class="btn btn-primary my-element" >
      Open modal
    </button><br/><br/>

    <button type="button" class="btn btn-primary my-element">
      Open modal
    </button>


    <div class="modal fade" tabindex="-1" role="dialog" id="MyModalWindow" >
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-body">
            Modal Content
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Close
            </button>
          </div>
        </div>
      </div>
    </div>




[1]: http://en.wikipedia.org/wiki/Flash_of_unstyled_content
[2]: http://api.jqueryui.com/position/
[3]: http://getbootstrap.com/javascript/#modals-events
[4]: https://stackoverflow.com/a/8324628/1366033

I'm having some problems with Bootstrap modal. The first time calling my modal, it's positioned about 20px to the left, but after that it's positioned correctly according to [`.position()`][1]

Here's my code:

**HTML**:



    <div class="modal hide" id="AddCommentChat">
        <div class="modal-body">
            <div class="my-element"></div>
        </div>
    </div>
    <div class="modal hide" id="MyModalWindow"></div>

**JavaScript**:



    $('.my-element').click(function(){
      var that = $(this);
      $('#MyModalWindow').on('shown.bs.modal', function(){
        $(this).position({
          my: 'left top',
          at: 'right bottom',
          of: that
        });
        $('.modal-backdrop').css('background-color', 'transparent');
      }).modal();
    }); 

**Update**:
The problem was solved by adding the next code:

            $('#ModalEditingDeleting').css({
                left: 0,
                top: 0
            });
The final code is:

        $('.comment-manage').click(function(){
            $('#ModalEditingDeleting').css({
                left: 0,
                top: 0
            });
            var that = $(this);
            $('#ModalEditingDeleting').on('shown.bs.modal', function(){
                $(this).position({
                    my: 'left top',
                    at: 'right top',
                    of: that
                });
                $('.modal-backdrop').css('background-color', 'transparent');
            }).modal();
        });

 
Thanks for your help!

[1]: https://jqueryui.com/position/