链接中的简单JQuery用户界面对话框
我已经做了几个小时的实验，我仍然很困惑。
当单击链接(标记)时，我尝试打开一个JQuery UI对话框(模式)，从链接的href获取对话框窗口的内容。
到目前为止，我已经(从不同的地方收集到) testb.html是一个简单的html片段：
<div><p>Some text</p><p>more text</p</div>这样做的想法是，当锚(链接)被单击时，testb.html的内容会出现在对话框中。
为什么这个不行？
David (70岁的前老年痴呆症前程序员，几乎没有HTML经验)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$("a.modal").click(function(e) {
e.preventDefault();
$(".container").load(this.href).dialog("open");
});
</script>
</head>
<body>
<div class="container"></div>
<p><a href="testb.html" class="modal">Click!</a></p>
</body>
</html>
回答 4
Stack Overflow用户
发布于 2021-10-31 19:18:40
您可以使用以下代码：
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
</head>
<body>
<div class="container">
<p><a href="javascript:void(0)" data-get="testb.html" class="modal">Click!</a></p>
</div>
<div id="dialog" title="Basic dialog"></div>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$('.modal').on('click', function () {
var data = $(this).attr('data-get')
$('#dialog').html(data)
$("#dialog").dialog()
});
</script>
</body>
</html>Stack Overflow用户
发布于 2021-10-31 19:03:20
- 在元素存在于页面之前运行赋值。将其包装在加载处理程序中。
$(function() { // on load $(“a.modal”).click(函数(E){ e.preventDefault()；$(".container").load(this.href) }；})
- 您不能以对话框的方式打开容器。你需要这样的东西
$(函数(){ // on page load $(".container").dialog({ autoOpen: false，宽度: 750，模式: true })；$(“a.modal”).click(函数(E){ e.preventDefault()；$(".container").load(this.href) $(".container").dialog('open')；})；}
Stack Overflow用户
发布于 2021-10-31 19:13:06
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery test</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#modal" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#modal" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="modal">This my first jQuery UI Dialog!</div>
<p><a href="#" id="opener">Click!</a></p>
</body>
</html>这将在单击锚标记时打开jquery对话框模型。
https://stackoverflow.com/questions/69789629
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号