單擊發送按鈕后將觸發功能，並且模式對話框不會淡出

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應該注意所有的模式顯示和隱藏操作。