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

Question

please any help ? 请帮忙吗？ I'm trying to add popup div to my mobile web app in JQM , but unfortunately the code above doesn't work on my mobile phone , it show the app in tiny at the right corner. 我正在尝试在JQM中将弹出式div添加到我的移动Web应用程序中，但是不幸的是，上面的代码在我的手机上不起作用，它在右上角显示了该应用程序。 but in IE I see it fine. 但是在IE中我认为还可以。 what i'm doing wrong? 我做错了什么？

<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>

and my javascript code: 和我的JavaScript代码：

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

screenshot: 屏幕截图：

在此处输入图片说明

any suggestions? 有什么建议么？ Thanks, MOR 谢谢，MOR

Answer 1

I found what cause this happen . 我发现发生这种情况的原因。 it seems that popup doesn't work on <html dir="rtl"> the rtl messed it up.. 似乎在<html dir="rtl">的rtl无法将弹出窗口弄乱。

Answer 2

check if you have <meta name="viewport" content="width=device-width, initial-scale=1"> in your head. 检查您的脑袋中是否有<meta name="viewport" content="width=device-width, initial-scale=1"> 。

Here is an example my popup: 这是我的弹出窗口的一个示例：

<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>

Answer 3

u can use "Bootstrap" http://getbootstrap.com/ 您可以使用“ Bootstrap” http://getbootstrap.com/

1. Include it at the beginning of all your projects. 1.将其包括在所有项目的开头。

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

2. For Example: 2.例如：

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

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

3. Pop-up 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 -->

Like this 像这样

Sorry i cant post the image! 抱歉，我无法发布图片！

u can try this link!! 你可以试试这个链接！ http://images.plurk.com/2Ovvy6BlcrVkFJTGyPLubS.jpg thx!! http://images.plurk.com/2Ovvy6BlcrVkFJTGyPLubS.jpg谢谢！

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-12-06 02:47:36

解决方案2
0 2013-12-06 14:58:48

解决方案3
-1 2013-12-06 01:50:07

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-12-06 02:47:36

解决方案2 0 2013-12-06 14:58:48

解决方案3 -1 2013-12-06 01:50:07

解决方案1
1 已采纳 2013-12-06 02:47:36

解决方案2
0 2013-12-06 14:58:48

解决方案3
-1 2013-12-06 01:50:07