使用增强的内容添加动态弹出窗口

我正在尝试在我的页面中动态添加一个弹出窗口，nith nite jqm content（按钮等）。添加了弹出窗口，但没有应用样式。

这是代码（它不长，所以我在这里复制）：

<!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版本，可以玩。

因此，如果我单击显示静态弹出式它可以很好地显示标头，但是如果我单击添加popup ，请与显示此新添加的弹出窗口> show显示此新添加的弹出式动态弹出弹出窗口的内容看起来有所不同。（使用Chrome）

所以问题是：如何封装动态添加的弹出内容？

我找到了解决方案，您可以以与内容相同的级别插入弹出式，例如

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

以这种方式很好，弹出函数很好，但是当您从Ajax请求中插入代码时，您必须在页面中插入弹出窗口并回忆组件的方法弹出窗口。

ex .js文件中的ajax呼叫（响应只是弹出代码）：

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

请记住，当您在主页上声明某些弹出窗口时，它与内容的级别不同。JQM会自动将弹出窗口放在这个地方，并且不会产生问题。

您必须重新粉刷动态添加的内容。要执行此操作，请在popup.popup();之后添加page.page('destroy').page();。

工作示例：http：//jsbin.com/orehuv/3/

相关内容

最新更新

热门标签：