单击发送按钮将触发一个功能，并且模式对话框不会淡出

Question

我在jQuery中尝试了几种方法来淡出模态对话框。请看看我有什么

带有文本区域的sendMessage按钮。

<div class="sendmessage">
    <textarea class="form-control" rows="2"></textarea>
    <br>
    <button onClick="infoAlert();" type="button" id="sendMessage" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Send Message</button>
</div> 

单击发送按钮将调用JavaScript函数infoAlert（），并且在其中调用jQuery淡出函数。淡出根本没有发生。

我的jsfiddle在这里。有人可以帮助找出问题吗？

function infoAlert(){
    $(document).ready (function(){
        $("sendmessage").click(function(){  
            $("#myModal").show();
            $("#myModal").fadeOut('slow', 0, function(){
                $("#myModal").dialog('close');
            });
        });
    });
}

] [1]：

Answer 1

我在小提琴中看到的第一件事是你选择了 2 个引导 js 文件，这将导致冲突。因此，您必须选择其中之一，而不是两者兼而有之。

第二件事是$（"sendmessage"）.click（function（）{}）。它应该是$（'.sendmessage'）。

第三个是当你调用div#myModal show然后隐藏它时，你的代码没有任何意义。Bootstrap js 应该注意所有的模态显示和隐藏动作。

Answer 2

如果您打开浏览器调试器控制台，您将看到一个错误：

未捕获的引用错误： 未定义信息警报

基本上，infoAlert()函数需要在$(document).ready中定义，如下所示：

$(document).ready (function(){
  function infoAlert(){
    $("sendmessage").click(function(){  
      $("#myModal").show();
      $("#myModal").fadeOut('slow', 0, function(){
        $("#myModal").dialog('close');
      });
    });
  }
});

您可以在此处阅读有关$.ready()函数的更多信息。

由于您已经指定了 data-toggle="modal" 和 data-target="#myModal" HTML 属性，因此您不需要任何 javascript 即可达到相同的效果。看看这个更新的小提琴，删除了所有的Javascript。

另外，请注意，在您的原始小提琴中，您不需要同时使用 Bootstrap 3.2.0 和 Bootstrap 2.3.2。