Skip to main content
se eliminaron 22 caracteres en el cuerpo
Origen Enlace
The One
  • 1k
  • 2
  • 12
  • 22

Al parecer no es buena idea mezclar el Modal de las Directivas de Angular JS para Bootstrap con el sliderAdicionalmente a la excelente respuesta de JQuery UIAlvaro, asi que mejor hice todo conesta solución solo usa los componentes de JQuery UI: y no se presenta el problema descrito.

PLUNKER AQUI

<html lang="en">

<head>
 <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
 <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>

<body>
 <meta charset="utf-8" />
 <title>dialog demo</title>
 <button id="opener">open the dialog</button>
 <div id="dialog" title="Dialog Title">I'm a dialog
 <div id="slider"></div>
 </div>
</body>
</html>

JS

$(function() {
 $("#dialog").dialog({
  autoOpen: false
 });
$("#opener").click(function() {
$("#dialog").dialog("open");
$("#slider").slider();
});
});

Al parecer no es buena idea mezclar el Modal de las Directivas de Angular JS para Bootstrap con el slider de JQuery UI, asi que mejor hice todo con JQuery UI:

PLUNKER AQUI

<html lang="en">

<head>
 <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
 <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>

<body>
 <meta charset="utf-8" />
 <title>dialog demo</title>
 <button id="opener">open the dialog</button>
 <div id="dialog" title="Dialog Title">I'm a dialog
 <div id="slider"></div>
 </div>
</body>
</html>

JS

$(function() {
 $("#dialog").dialog({
  autoOpen: false
 });
$("#opener").click(function() {
$("#dialog").dialog("open");
$("#slider").slider();
});
});

Adicionalmente a la excelente respuesta de Alvaro, esta solución solo usa los componentes de JQuery UI y no se presenta el problema descrito.

PLUNKER AQUI

<html lang="en">

<head>
 <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
 <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>

<body>
 <meta charset="utf-8" />
 <title>dialog demo</title>
 <button id="opener">open the dialog</button>
 <div id="dialog" title="Dialog Title">I'm a dialog
 <div id="slider"></div>
 </div>
</body>
</html>

JS

$(function() {
 $("#dialog").dialog({
  autoOpen: false
 });
$("#opener").click(function() {
$("#dialog").dialog("open");
$("#slider").slider();
});
});
Publicación recuperada por The One
Publicación eliminada por The One
Origen Enlace
The One
  • 1k
  • 2
  • 12
  • 22

Al parecer no es buena idea mezclar el Modal de las Directivas de Angular JS para Bootstrap con el slider de JQuery UI, asi que mejor hice todo con JQuery UI:

PLUNKER AQUI

<html lang="en">

<head>
 <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
 <link data-require="jqueryui@*" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
 <script data-require="jqueryui@*" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
 <link rel="stylesheet" href="style.css" />
 <script src="script.js"></script>
</head>

<body>
 <meta charset="utf-8" />
 <title>dialog demo</title>
 <button id="opener">open the dialog</button>
 <div id="dialog" title="Dialog Title">I'm a dialog
 <div id="slider"></div>
 </div>
</body>
</html>

JS

$(function() {
 $("#dialog").dialog({
  autoOpen: false
 });
$("#opener").click(function() {
$("#dialog").dialog("open");
$("#slider").slider();
});
});