jquery模态不起作用

时间:2014-07-31 05:34:59

标签: javascript jquery

之前从未使用过jquery模式,我无法完成这项工作。有什么建议吗?

我得到“未定义不是”$('#dialog')的函数。对话框({“

这是我的HTML:

<div id="dialog" title="Enter your Email Address">Please enter your email address</div>

这是我的JS:

$(".input").click(function() {
    console.log("Notify Me");

    var emailAdd = $(".form").val();

    if (emailAdd.length <5) {

       $(function(){
            // jQuery UI Dialog
            $('#dialog').dialog({
            autoOpen: false,
            width: 400,
            modal: true,
            resizable: false,
            buttons: {
            "Yes": function() {
            $(this).dialog("close");
            $(location).attr('href',$(this).dialog('option', 'anchor'));
            return true;
            },
            "No": function() {
            $(this).dialog("close");
            return false;
            }
            }
            });

            $('.closebutton').click(function(){
            $('#dialog').dialog('option', 'anchor', $(this).attr('href'));
            $('#dialog').dialog('open');
            return false;
            });
            }); 



    } else {

            Some function
    }

2 个答案:

答案 0 :(得分:0)

尝试

$(function(){
$(".input").click(function() {
console.log("Notify Me");
var emailAdd = $(".form").val();
if (emailAdd.length <5) {
 $( "#dialog" ).dialog();
}
});
});

Working Fiddle

答案 1 :(得分:0)

DEMO

$(document).ready(function ()
{
  $("#btnShowSimple").click(function (e)
  {
     ShowDialog(false);
     e.preventDefault();
  });

  $("#btnShowModal").click(function (e)
  {
     ShowDialog(true);
     e.preventDefault();
  });

  $("#btnClose").click(function (e)
  {
     HideDialog();
     e.preventDefault();
  });

  $("#btnSubmit").click(function (e)
  {
     var brand = $("#brands input:radio:checked").val();
     $("#output").html("<b>Your favorite mobile brand: </b>" + brand);
     HideDialog();
     e.preventDefault();
  });

 });

function ShowDialog(modal)
{
  $("#overlay").show();
  $("#dialog").fadeIn(300);

  if (modal)
  {
     $("#overlay").unbind("click");
  }
  else
  {
     $("#overlay").click(function (e)
     {
        HideDialog();
     });
  }
}

function HideDialog()
 {
  $("#overlay").hide();
  $("#dialog").fadeOut(300);
 }