弹出窗口在我的手机-JQM上无法正常工作

时间：2013-12-06 01:11:59

标签： javascript jquery jquery-mobile

请帮忙吗？ 我正在尝试在JQM中添加popup div到我的移动网络应用程序，但不幸的是上面的代码在我的手机上不起作用，它在右下角显示应用程序。但是在IE中我看得很清楚。 我做错了什么？ 

<div data-role="page" id="page2" >

        <div data-role="popup" id="popupBasic2"  class="ui-content">
            <a href="#" data-rel="back" data-role="button" data-theme="d" data-icon="delete" data-iconpos="notext" class="ui-btn-right"  title="close"></a>
            Close
       </div>
</div>

和我的javascript代码：

    $("#popupBasic2").popup('open');

截图：

enter image description here

有什么建议吗？ 谢谢，MOR

3 个答案:

答案 0 :(得分：1)

我找到了导致这种情况的原因。似乎弹出窗口无效<html dir="rtl"> rtl搞砸了它。

答案 1 :(得分：0)

检查你的头脑是否<meta name="viewport" content="width=device-width, initial-scale=1">。

以下是我的弹出窗口示例：

<a href="#popupDelete" data-rel="popup" data-inline="true" data-position-to="window">Delete Bonus</a>

            <div data-role="popup" id="popupDelete" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
            <div data-role="header" data-theme="b" class="ui-corner-top">
                <h1>Delete?</h1>
            </div>
                <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
                <h3 class="ui-title">To Delete Bonus?</h3>
                <p>This action cannot be undone.</p>
                <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="c">Cancel</a>
                <a href="" onclick="deletebonus();" data-role="button" data-inline="true"  data-theme="b" rel="external">Delete</a>
                </div>
            </div>

答案 2 :(得分：-1)

你可以使用“Bootstrap”http://getbootstrap.com/

<强> 1。将其包含在所有项目的开头。 

<script type="text/javascript" src="js/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">

<强> 2。例如： 

<button class="btn btn-success" data-toggle="modal" data-target="#newModal"></button>

 ->data-target ="#newModal" !! so...find the id named 'newModal'

第3。弹出 

<!-- Modal: there is popup Screen-->
<div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
  <div class="modal-content">

    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <h4 class="modal-title" id="myModalLabel">hihihihihi</h4>
    </div>


    <div class="modal-body">
    <div class="form-group">
   <label for="Name" class="col-md-3 control-label">Name</label>
   <div class="col-md-4">
     <input type="text" class="form-control" id="myName" name="myName" maxlength="20">
   </div>
    </div>        
   </div><!-- /.modal-body -->

   <div class="modal-footer">
      <label  class="col-md-6 control-label">there is a footer</label>
   </div>

   </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

喜欢这个

抱歉，我无法发布图片！

你可以尝试这个链接!! http://images.plurk.com/2Ovvy6BlcrVkFJTGyPLubS.jpg THX !!

相关问题
最新问题