在函数内部调用 div答案

【问题标题】：Call div inside a function在函数内部调用 div
【发布时间】：2014-08-04 17:05:37
【问题描述】：

我正在尝试使用 jQuery mobile 1.4.3 创建一个类似于 iOS 警报视图的弹出窗口。我需要从 javascript 事件触发我的警告消息，例如带有 OK 按钮的确认消息，显示对 Web 服务的 ajax 响应调用。

我的第一个问题是通过弹出窗口小部件传递数据，经过大量搜索我发现这是不可能的。

我找到了几乎是我需要的代码：

$('#index').live('pagebeforeshow',function(e,data){   
    $("#test-button").bind('click',function(event, ui){
        $('<div>').simpledialog2({
            mode: 'button', 
            headerText:  'Dialog', 
            buttonPrompt: 'Please, don\'t ruin my blue world', 
            buttons : {'close': {click: function() {}}},
            width: '120px'
        })
    });  
});

问题是我需要这个函数不是通过单击按钮而是通过函数调用的：像这样的：

//POPUP CODE
// 1 == warning green

// 2 == warning yellow

// 3 == warning red

function customAlert(message, typeOfWarning){

    if(typeOfWarning == "1"){
        var auxStr = "green";
    };
    if(typeOfWarning == "2"){
        var auxStr = "yellow";
    };
    if(typeOfWarning == "3"){
        var auxStr = "red";
    };


    $('<div>').simpledialog2({
        mode: 'button', 
        headerText:  'Dialog', 
        buttonPrompt: 'Please, don\'t ruin my blue world', 
        buttons : {'close': {click: function() {}}},
        width: '120px'
    })
};

我是 JavaScript 和 jQuery Mobile 的新手，需要帮助，但无法使用。

提前致谢。

【问题讨论】：

您将模态和所有内容添加到函数中，然后在单击处理程序中调用该函数，并将响应传递给那里。
您知道.live() 已被弃用很长时间，并从更新的jQuery 版本中删除了吗？
类似这样的：jsfiddle.net/ezanker/jL3W6 ?

标签： javascript jquery html ajax jquery-mobile

【解决方案1】：

jQuery Mobile 的Popup 小部件 有很多方法来操作它。它可以通过按钮调用或以编程方式打开。结构很简单，但是请注意，只有页面 div 应该是弹出窗口的直接父级。

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

通过按钮或锚点静态打开它：

<a href="#foo" data-rel="popup" data-transition="pop">Popup</a>

以编程方式打开它：

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

此外，您可以将特殊事件用于您想要的任何目的，例如popupafteropen 和 popupafterclose。

以下是动态创建的弹出窗口的示例。

// close button
var closeBtn = $('<a href="#" data-rel="back" class="ui-btn-right ui-btn ui-btn-b ui-corner-all ui-btn-icon-notext ui-icon-delete ui-shadow">Close</a>');

// text you get from Ajax
var content = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing. Morbi convallis sem et dui sollicitudin tincidunt.</p>";

// Popup body - set width is optional - append button and Ajax msg
var popup = $("<div/>", {
    "data-role": "popup"
}).css({
    width: $(window).width() / 1.5 + "px",
    padding: 5 + "px"
}).append(closeBtn).append(content);

// Append it to active page
$.mobile.pageContainer.pagecontainer("getActivePage").append(popup);

// Create it and add listener to delete it once it's closed
// open it
$("[data-role=popup]").on("popupafterclose", function () {
    $(this).remove();
}).on("popupafteropen", function () {
    $(this).popup("reposition", {
        "positionTo": "window"
        /* custom position
        x: 150, 
        y: 200 */
    });
}).popup({
    dismissible: false,
    history: false,
    theme: "b",
    /* or a */
    overlayTheme: "b",
    /* or a */
    transition: "pop"
}).popup("open");

Demo

【讨论】：