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

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

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

未捕获的ReferenceError：未定义infoAlert

基本上，您的infoAlert()函数需要在$(document).ready infoAlert()中定义：

$(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。

Answer 2

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

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

第三个是调用div＃myModal show然后将其隐藏时，您的代码没有任何意义。 Bootstrap js应该注意所有的模式显示和隐藏操作。