jquery对话框调整窗口大小,按钮消失

时间:2016-07-12 10:23:42

标签: jquery jquery-ui

我有一个用文本滚动条和两个按钮创建的jquery对话框。问题是,当我按下一个按钮大小调整窗口大小然后你必须关闭窗口并重新打开窗口再次看到它。



// Public Domain
// Feel free to use any of the JavaScript, HTML, and CSS for any commercial or private projects. No attribution required.
// I'm not responsible if you blow anything up with this code (or anything else you could possibly do with this code).

$().ready(function() { // When the document is ready run the code inside the brackets.
  $("button").button(); // Makes the button fancy (ie. jquery-ui styled)
  $("#dialog").dialog({ // Set the settings for the jquery-ui dialog here.
    autoOpen: false, // Don't open the dialog instantly. Let an event such as a button press open it. Optional.
    position: {
      my: "center",
      at: "center",
      of: "#constrained_div"
    } // Set the position to center of the div.
  }).parent().resizable({ // Settings that will execute when resized.
    containment: "#constrained_div" // Constrains the resizing to the div.
  }).draggable({ // Settings that execute when the dialog is dragged. If parent isn't used the text content will have dragging enabled.
    containment: "#constrained_div", // The element the dialog is constrained to.
    opacity: 0.70 // Fancy opacity. Optional.
  });

  $("#button").click(function() { // When our fancy button is pressed the stuff inside the brackets will be executed.
    $("#dialog").dialog("open"); // Opens the dialog.
  });
});

/* We include the jquery-ui.css here to make sure it's used. */

@import "http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css";
 #constrained_div {
  /* NOTICE avoid using margins since they screw up the true constraining div. */
  /* margin: 20px; */
  width: 500px;
  height: 250px;
  background: blue;
}
#dialog {
  overflow: scroll;
}

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
</head>

<body>
  <div id="constrained_div">
    <div id="dialog" title="I'm the dialog!">Yay!hfherthertherth rtherthertherthertherthert therthrth rth erthertherther rtherthertherthertherthert therthrth rth erthertherther rtherthertherthertherthert therthrth rth erthertherther
      <br>
      <br>
      <input type="button" value="Click me">
      <br>
      <br>
      <input type="button" value="Click mee">
    </div>
  </div>
  <button id="button">Click Me!</button>
</body>

</html>
&#13;
&#13;
&#13;

$().ready(function() { 
    $("button").button();
    $("#dialog").dialog({ 
        autoOpen: false, 
        position: {my: "center", at: "center", of: "#constrained_div"}
    }).parent().resizable({ 
        containment: "#constrained_div" 
    }).draggable({ 
        containment: "#constrained_div", 
        opacity: 0.70 // Fancy opacity. Optional.
    });

    $("#button").click(function() {
        $("#dialog").dialog("open"); // Opens the dialog.
    });
});

任何想法都会很棒

0 个答案:

没有答案