如何使用两个按钮创建一个对话框,如jquery mobile中的页面加载弹出窗口

时间:2014-02-13 11:38:29

标签: javascript html jquery-mobile

如何创建一个带有两个按钮的对话框,如jquery mobile中的页面加载弹出窗口。是否可以这样做。有谁可以帮助我吗。它应该在不点击任何按钮的情况下创建。拜托。

<script>
 $(".parentDisable").show();
     });

     $(".parentDisable").click(function () {
         $("#dialog").dialog('close');
         $(".parentDisable").fadeOut(1000);
     });

     $(".ui-button-icon-primary").click(function () {
         $("#dialog").dialog('close');
         $(".parentDisable").fadeOut(1000);
     });

 });
</script>

  <div id="dialog" title="Basic dialog" style="display:none;">
  <div class="ui-popup">Do you want to Reset the progress</div>
                <br/>                       
                <hr >
                <div id="confirm_btn">
                    <div style="width:40%;float:left">
                        <a href="#"     onClick="resetprogress();" data-role="button" data-inline="true"  data-theme="c">
                            Yes
                        </a>
                    </div>
                    <div style="width:40%;float:right;">
                        <a href="#" class="ui-corner-all" data-role="button" data-rel="back" data-inline="true" data-transition="flow" data-theme="b">
                            No
                        </a>
                    </div>
                </div>
</div>
<div class="parentDisable" style=""></div>
<button id="popup">Pop Up</button>

这是我在jsfiddle工作的代码,但在我的网页上没有工作

1 个答案:

答案 0 :(得分:0)

这是Demo

        <!-- start of property Dialog -->
     <div id="propertyDialog" title = "Property Dialog" style="display : none; ">
       div id="jqgrid">
         <table id="PropertyJQGrid" style=" overflow:scroll; height : 80%;"><tr><td></td></tr></table>
            <div id="pager"></div>
       </div>   
    </div> <!--end of dialog  -->
   <!-- start of dialog form  search-->

在Document.onReady函数中编写以下代码

$("#propertyDialog").dialog();
$("#propertyDialog").dialog('open');

指定他的身高和宽度: -

 $("#propertyDialog").dialog({ 
        autoOpen: false,
        height: 300,
        width: 900,
        modal: true,
        buttons: {
          "Ok" : function() {

              $( "#propertyDialog" ).dialog("close");
          },
          "Cancel" : function() {
              $( "#propertyDialog" ).dialog("close");
          },
        },
        close: function() {
        }
      });