gpt4 book ai didi

javascript - jquery 对话框

转载 作者:行者123 更新时间:2023-12-02 20:21:46 25 4
gpt4 key购买 nike

我有下面的 jquery 代码,我已根据我的要求对其进行了自定义,但存在一些问题。首先,用户单击“单击此处”,不会显示对话框。当用户单击“关闭”时,对话框不会消失。非常感谢您提供的所有帮助。

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Basic modal</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.5.1.js">
</script>
<script src="../../external/jquery.bgiframe-2.1.2.js">
</script>
<script src="../../ui/jquery.ui.core.js">
</script>
<script src="../../ui/jquery.ui.widget.js">
</script>
<script src="../../ui/jquery.ui.mouse.js">
</script>
<script src="../../ui/jquery.ui.draggable.js">
</script>
<script src="../../ui/jquery.ui.position.js">
</script>
<script src="../../ui/jquery.ui.resizable.js">
</script>
<script src="../../ui/jquery.ui.dialog.js">
</script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$("#clickHere").onclick(function(){
$( "#dialog-modal" ).dialog({
height: 140,
modal: true,

});

});



$("#close").onclick(function(){
$("dialog-modal").destroy();
})


$( "#dialog-modal, #close" ).dialog({ resizable: false });
$("#dialog-modal").dialog({autoOpen: false});
$( "#dialog-modal" ).dialog({ closeOnEscape: false });


$( "#close" ).dialog({ modal: false });


});


</script>
</head>
<body>

<div class="demo">
<div id="dialog-modal" title="Basic modal dialog" style="display:none">
<p>
Adding the modal overlay screen makes the dialog look more
prominent because it dims out the page content.
</p>
<a id="close" href="">Close</a>
</div>

<a href="#" id="clickHere">Click here</a>


<!-- Sample page content to illustrate the layering of the dialog -->
<div class="hiddenInViewSource" style="padding: 20px;">
<p>
Sed vel diam id libero
<a href="http://example.com">rutrum convallis</a>. Donec aliquet
leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum,
enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet
auctor elit eros a lectus.
</p>
<form>
<input value="text input" />
<br />
<input type="checkbox" />
checkbox
<br />
<input type="radio" />
radio
<br />
<select>
<option>
select
</option>
</select>
<br />
<br />
<textarea>textarea</textarea>
<br />
</form>
</div>
<!-- End sample page content -->

</div>
<!-- End demo -->


<!-- <div id="dd" class="demo-description" style="display: none;">

<p>
A modal dialog prevents the user from interacting with the rest of
the page until it is closed.
</p>
<a href="#" id="close">Close</a>
</div> -->
<!-- End demo-description -->

</body>
</html>

最佳答案

这只是 click(),而不是 onclick(),例如:

$("#clickHere").click[...]

除此之外,#close 元素可能尚不存在,因此您可以绑定(bind)到 $("#close"),但首先尝试按照上面的建议更改点击方法。

关于javascript - jquery 对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5462417/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com