CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapdialog
stefan
stefan

Reputation: 57

Bootstrap jQuery ui dialog conflict

I was trying to add a simple dialog box to my bootstrap website but I can get that right. Something seems to go wrong with my links because when I tested the dialog box on a blank website (with no Bootstrap links) it worked perfectly. Please take a look at my code...

Keep it as simple as possible please:

<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery UI Dialog - Default functionality</title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="jquery-style.css">
    <link rel="stylesheet" href="/resources/demos/style.css">

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
      <script>
      $(function() {
        $( "#dialog" ).dialog({
        modal:true,
        show: {effect:"fade",
        duration:250},
        hide: {effect:"fade",
        duration:250}
        });
      });
      </script>
    </head>
    <body>
    </body>
</html>

Upvotes: 2

Views: 2207

Answers (1)

Saraf Sissddharth
Saraf Sissddharth

Reputation: 175

Stefanos Ioannou, you are using 2 jquery version why you don't place latest one.

or use jQuery.noConflict(); in document ready which will may solve your problem.

Upvotes: 2

Related Questions