Question

我有一个使用jquery mobile的骨干应用程序。我试图使用一个对话框弹出，但问题是当我点击链接#popupSuccess它没有激活模态因为我假设骨干正在捕获它。有什么想法吗？

这是我的模态代码

<a class="modalLink" id="modalSuccessTrigger" href="#popupSuccess" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop" data-icon="delete" data-theme="b">Success</a>

<div data-role="popup" id="popupSuccess" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all modalLinkCont">
    <div data-role="header" data-theme="a" class="ui-corner-top">
        <h1>Correct!</h1>
    </div>
    <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content" style="background-color:white">
        <h3 class="ui-title">That is correct. Tap to continue to level 2</h3>
        <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Contineu</a>
    </div>
</div>

Answer 1

您需要以编程方式启动弹出窗口：

在骨干视图中：

events: {
   'click #modalSuccessTrigger': 'openPopUp'
},

openPopUp: function(e) {
   e.preventDefault()
   $('#modalSuccessTrigger').popup('open')
}

有关详细信息，请参阅doc：http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/index.html

Answer 2

为了解决这个问题，我用来阻止骨干路由并激活标记为data-rel="popup"的链接的弹出处理

$(document).ready(function(){
  ($('a[data-rel="popup"]')).on('click', function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    var target = $(this).attr("href");
    $(target).popup('open');
  });
});

jQuery Mobile对话框和Backbone js

2 个答案: