弹出框未显示

时间:2015-12-25 10:11:52

标签: javascript jquery

这是我的按钮,我在jsp页面中有它

  <button type="button" class="btn btn-primary" id="offerPhoneButton" onclick="offerPhone()">Offer Phone</button>

这是我的剧本

           <script type="text/javascript">
function offerPhone() {
    var phoneDialog = $("#myPhoneList").dialog({
        title: 'My Phone',
        autoOpen : false,
        closeText : 'hide',
        show : "fade",
        hide : "fade",
        modal : true,
        width : "400px",
        position: { my: "left top", at: "left top", of: window },
        open : function() {
            alert('hi');
            // load doctor_phones.jsp into the phones dialog.

             /* $(this).load('pages/doctor/write_prescription.jsp?patient_id=' + patientId + '&patient_name=' + patientName);  
               this doesn't work, seems to return before the content is actually loaded.    */

              var content =   ajaxGetJQuery("pages/doctor/doctor_phones.jsp"); 
               $("#myPhoneList").dialog("option", "title", "My Phones"); // this is necessary, b/c the title attribute doesn't work.
              $(this).html(content);                 
        }
    });

    $("#myPhoneList").dialog("open");
}
        </script>

但是当我点击提供电话按钮时,如果你发现我的脚本有任何问题,弹出框就不会显示了,请告诉我

2 个答案:

答案 0 :(得分:4)

您的代码没有问题。如果你使用

onclick="offerPhone()

你的代码必须在这样的body标签之间。

https://jsfiddle.net/u0L94rLe/

答案 1 :(得分:0)

您的代码工作正常,如

所示

FIDDLE

<强> JS

function offerPhone() {
    var phoneDialog = $("#myPhoneList").dialog({
        title: 'My Phone',
        autoOpen : false,
        closeText : 'hide',
        show : "fade",
        hide : "fade",
        modal : true,
        width : "400px",
        position: { my: "left top", at: "left top", of: window },
        open : function() {
            alert('hi');
            var content =   ajaxGetJQuery("pages/doctor/doctor_phones.jsp"); 
               $("#myPhoneList").dialog("option", "title", "My Phones"); // this is necessary, b/c the title attribute doesn't work.
              $(this).html(content);                 
        }
    });




    $("#myPhoneList").dialog("open");
}

<强> HTML

<button type="button" class="btn btn-primary" id="offerPhoneButton" onclick="offerPhone()">Offer Phone</button>

  <div id="myPhoneList" title="Basic dialog">
  <p>Heading</p>
</div>