Conflict between jquery-ui and bootstrap 3

This example shows how both libraries have a conflict with resizing functionality.

by Daniela Fernandez

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<a id="pop" href="http://www.w3schools.com/" title="Testing">Open dialog</a>

JavaScript

$(document).ready(function ()
{
    $('a#pop').on('click', function (e)
    {
        e.preventDefault();
        var page = $(this).attr("href");
        var pagetitle = $(this).attr("title");
        var myDialog = $('<div></div>')
        .html('<iframe style="border: 0; " src="' + page + '" width="100%" height="100%"></iframe>')
        .dialog({
            autoOpen: false,
            modal: false,
            height: 500,
            width: 600,
            title: pagetitle,
            open: function (event, ui)
            {
                myDialog.css('overflow', 'hidden');
            }
         });
         myDialog.dialog('open');
    });
});    

//Remove the external resource of bootstrap and check the right margin of the dialog
//http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css