[英]On click of a send button will trigger a function and the modal dialog is not fading out
I have tried couple of ways in jQuery for fading out a modal dialog. 我在jQuery中尝试了几种方法来淡化模式对话框。 Please see what I have got
请看看我有什么
A sendMessage
button with a text area. 带文本区域的
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>
On click of the send button will call a JavaScript function infoAlert() and the jQuery fading out function is called with in that. 单击发送按钮后,将调用JavaScript函数infoAlert(),并在其中调用jQuery淡出函数。 The fading out is not happening at all.
渐隐完全没有发生。
My jsfiddle is here . 我的jsfiddle在这里 。 Could some help to figure out the problem?
可以帮助您解决问题吗?
function infoAlert(){
$(document).ready (function(){
$("sendmessage").click(function(){
$("#myModal").show();
$("#myModal").fadeOut('slow', 0, function(){
$("#myModal").dialog('close');
});
});
});
}
] [1]: ] [1]:
If you opened up your browser debugger console, you will see that there is an error saying: 如果打开浏览器调试器控制台,将看到一个错误消息:
Uncaught ReferenceError: infoAlert is not defined
未捕获的ReferenceError:未定义infoAlert
Basically, your infoAlert()
function needs to be defined within your $(document).ready
like this: 基本上,您的
infoAlert()
函数需要在$(document).ready
infoAlert()
中定义:
$(document).ready (function(){
function infoAlert(){
$("sendmessage").click(function(){
$("#myModal").show();
$("#myModal").fadeOut('slow', 0, function(){
$("#myModal").dialog('close');
});
});
}
});
You can read more about the $.ready()
function here . 您可以在此处阅读有关
$.ready()
函数的更多信息。
Since you have already specified the data-toggle="modal"
and data-target="#myModal"
HTML attributes, you don't need any javascript to achieve the same effect. 由于您已经指定了
data-toggle="modal"
和data-target="#myModal"
HTML属性,因此不需要任何JavaScript即可达到相同的效果。 Take a look at this updated fiddle with all the Javascript removed. 看一看已删除所有Javascript的更新小提琴 。
Also, note that in your original fiddle, you don't need to use both Bootstrap 3.2.0 and Bootstrap 2.3.2. 另外,请注意,在您原来的小提琴中,您无需同时使用Bootstrap 3.2.0和Bootstrap 2.3.2。
The first thing I saw in fiddle is you chose 2 bootstrap js files, which will cause the conflict. 我在小提琴中看到的第一件事是您选择了2个bootstrap js文件,这将导致冲突。 So, you have to choose one of them, not both.
因此,您必须选择其中之一,而不是两者都选。
The second thing is $("sendmessage").click(function(){}). 第二件事是$(“ sendmessage”)。click(function(){})。 It should be $('.sendmessage').
它应该是$('。sendmessage')。
The third one is your code does not make any sense when you call div#myModal show then hide it. 第三个是调用div#myModal show然后将其隐藏时,您的代码没有任何意义。 Bootstrap js should take care all the modal show and hide action.
Bootstrap js应该注意所有的模式显示和隐藏操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.