gpt4 book ai didi

jquery-mobile - 添加具有增强内容的动态弹出窗口

转载 作者:行者123 更新时间:2023-12-02 07:38:57 25 4
gpt4 key购买 nike

我正在尝试向我的页面动态添加一个弹出窗口,其中包含不错的 JQM 内容(按钮等)。添加了弹出窗口,但未应用任何样式。

这是代码(不是很长,所以我复制在这里):

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head>
<body>
<div id='page' data-role='page'>

<div data-role='header'>
<h1> Header </h1>
</div>

<div data-role='content'>
<p>Code sample</p>
<a id='add' data-role='button'> Add popup </a>
<a href='#popup' data-role='button' data-rel='popup'> Show dynamic popup </a>
<a href='#popup2' data-role='button' data-rel='popup'> Show static popup </a>

</div>
<div id="popup2" data-role='popup'>
<div data-role="header">
<h1>Popup Header</h1>
</div>
<div data-role="content">
<p>Some content</p>
</div>
</div>

</div>
<script>
$(document).ready( function(){
$('#add').bind( 'click', function(ev){
var
page = $('#page');
var
popup = $('<div id="popup" data-role="popup"></div>').appendTo( page )
, header = $('<div data-role="header"> <h1>Popup Header</h1> </div>').appendTo( popup )
, content = $('<div data-role="content"> <p>Some content</p> </div>').appendTo( popup );
popup.popup();
});
});
</script>
</body>
</html>

有一个JsBin版本,来玩玩它。

因此,如果我点击显示静态弹出窗口,它会很好地显示标题,但如果我点击添加弹出窗口,则不会显示这个新添加的弹出窗口显示动态弹出窗口 弹出窗口的内容看起来不同。(使用 chrome)

所以问题是:如何增强动态添加的弹出内容?

最佳答案

我找到了解决方案,例如,您可以将弹出窗口插入与内容相同的级别。

<div data-role="page" >
<div data-role="content" ></div>
<div data-role="popup"></div>
</div>

用这种方式弹窗功能很好,但是当你从ajax请求中插入代码时,你必须在页面中插入弹窗并调用组件的弹窗方法。

ajax 调用中的 ex .js 文件(响应只是弹出的代码):

$('#page').append(response).trigger('create');

$("#popup").popup();

请记住,当您在主页面中声明一些弹出窗口时,它与内容不在同一级别。 JQM 自动将弹出窗口放在这个位置,它不会产生问题。

关于jquery-mobile - 添加具有增强内容的动态弹出窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13294362/

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