Question

当碰到弹出按钮时，我需要显示类似于此小提琴

中所示的相似行为

http://jsfiddle.net/tdzfhzjy/31/

我的尝试与此小提琴中所示的相同

http://jsfiddle.net/tdzfhzjy/32/

但不是弹出它被附加为文本内容

场景：

单击标题1或标题2（标签），然后单击关闭按钮

这就是我的尝试

$(document).on('click', '.close', function(event) {

    var html = '<div data-role="popup" id="transitionExample" class="ui-content" data-theme="a">\
                <div class="popup_inner popup_sm">\n\
                    <div class="popup_content popup_myactivelabels_content">\n\
                        <p>Sorry! Now we are not able to delivery these timings</p>\n\
                        <h3>Our Available timings</h3>\n\
                        <p>11am to 2pm</p>\n\
                    </div>\n\
                    <div class="popup_footer">\n\
                        <a>Ok, Got It.</a>\n\
                    </div>\n\
                </div>\n\
            </div>'


    $(this).closest('.labellistUL').append(html);
});

你可以告诉我如何表现得和第一个小提琴中的表现一样

Answer 1

您也可以像这样解决它。如果以这种方式执行此操作，则无需绑定单击事件。只需将粘贴复制到您的小提琴并删除绑定事件。

<div role="main" class="ui-content oms-content">
    <div class="myactivelabelsWrap">
        <div data-role="collapsible" data-inset="false">
                <h3>Heading 1<a class="icon-pencil-1 labelEditIcon"></a></h3>

            <ul data-role="listview" class="labellistUL">        
                <li class="labellist">
                    <div class="close"> <a href="#transitionExample" class="ui-btn ui-corner-all ui-shadow ui-btn-inline closestyle" data-rel="popup" data-position-to="window">Position to window</a>

                    </div>
                </li>    </ul>
        </div>
        <div data-role="collapsible" data-inset="false">
                <h3>Heading 2<a class="icon-pencil-1 labelEditIcon"></a></h3>

            <ul data-role="listview" class="labellistUL">        
                <li class="labellist">
                    <div class="close">
                        <a href="#transitionExample" class="ui-btn ui-corner-all ui-shadow ui-btn-inline closestyle" data-rel="popup" data-position-to="window">Position to window</a>
                    </div>
                </li>    </ul>
        </div>
    </div>
    <div data-role="popup" id="transitionExample" class="ui-content" data-theme="a">
        <div class="popup_inner popup_sm">
            <div class="popup_content popup_myactivelabels_content">
                <p>Sorry! Now we are not able to delivery these timings</p>
                    <h3>Our Available timings</h3>

                <p>11am to 2pm</p>
            </div>
            <div class="popup_footer">  <a>Ok, Got It.</a>

            </div>
        </div>
    </div>

如何使div作为Popup而不是文本追加

1 个答案: