模态弹出窗口在jquery中不起作用

时间:2016-06-06 10:21:43

标签: javascript jquery html

我在表单中有一个提交按钮 例如:

<div>
<form method = 'POST' action="#">
<input type="submit" class="btn btn-success myDialog" value="buy now"/>
</form>
</div>

我需要在引发submit事件时显示弹出对话框。我试过像这样的事情

html

中的

<div class="dialog">hello dialog box</div>

<{1>}文件中的

.js

对我来说上面的代码即使我尝试了$( ".myDialog" ).click(function() { alert();// alert is working $( ".dialog" ).dialog({ autoOpen: false, show: { effect: "blind", }, hide: { effect: "explode", } }); }); 也没有用,但没有用,有人可以帮我解决这个问题。

5 个答案:

答案 0 :(得分:1)

您需要设置autoOpen to true

  $(".dialog").dialog({
    autoOpen: true, // <-- set to true, which is default
    show: {
      ...
    ...
  });

您还应该从按钮上的点击事件更改为表单上的提交事件:

$(".myDialog").closest("form").on("submit", function() {
  $(".dialog").dialog({
    show: {
      effect: "blind",
    },
    hide: {
      effect: "explode",
    }
  });
});

备选方案,您可以稍后使用以下命令打开它:

$(".dialog").dialog("open");

答案 1 :(得分:1)

试试这个..

$(".myDialog").click(function() {
  $(".dialog").dialog({
    show: {
      effect: "blind"
    },
    hide: {
      effect: "explode"
    }
  });
});

$(".myDialog").click(function() {
  $(".dialog").dialog({
    show: {
      effect: "blind"
    },
    hide: {
      effect: "explode"
    }
  });
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css" /> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button class="myDialog">open the dialog</button>
<div class="dialog" title="Dialog Title" style="display: none">hello dialog box</div>

答案 2 :(得分:0)

EntityManagerFactory emf =
     Persistence.createEntityManagerFactory("YourPersistenceUnitNameHere")

更改输入框的类型。使用“按钮”而不是“提交”并尝试。

答案 3 :(得分:0)

使用此功能。

$( ".myDialog" ).click(function() {
  $( ".dialog" ).dialog({
  show: {
    effect: "blind",
    },
  hide: {
    effect: "explode",
       }
   });
});

并将type="submit"更改为type="button"

<input type="buttom" class="btn btn-success myDialog" value="buy now"/>

答案 4 :(得分:0)

这段代码可以工作。将输入类型从提交更改为按钮。

$CFG->wwwroot = 'http://mywebsite.com/lms';
$(function() {

$( ".dialog" ).dialog({
  autoOpen: false,
  show: {
    effect: "blind",
    },
  hide: {
    effect: "explode",
       }
   });
$( ".myDialog" ).click(function(e) {
  
  $(".dialog").dialog('open');
});
})