如何使用jQuery/AAJAX更改模态的文本
How do I change the text of a modal with jQuery/AJAX?
虽然这个问题以前被问过几次,但似乎没有一个答案对我有帮助。因此我再次问它。。。
我正在构建一个没有后端(没有服务器调用等)的网站的前端。我有一个显示内容的模式,带有next
和close
按钮。我最初的设计是,当按下next
按钮时,它会关闭打开的模式,并打开一个具有不同内容的新模式。我觉得这看起来不专业。我希望当用户按下next
按钮时,它会获取下一个模态的内容,并将其显示在打开的模态上,而不必一直打开和关闭模态。然而,我不知道该怎么做。我假设这可以通过jQuery和AJAX实现。我会附上我的代码。如有任何反馈,我们将不胜感激。
这是开放模态。当用户点击next
时,我希望用下一个模态替换<h4 class="modal-title>
和<div class="modal-body>
的内容。
<div class="modal fade protein-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!-- PROTEIN MODAL START-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title"> Lean Protien </h4><!--CHANGE THIS WITH NEXT MODAL-->
</div>
<div class="modal-body"><!--CHANGE THIS WITH NEXT MODAL-->
<p>
At every meal, divide your plate into three equal sections. On one-third of the plate put some low-fat protein that is no larger or thicker than the palm of your hand (that’s because some hands are larger than others).
</p>
<p>
This doesn’t have to be animal protein, but it has to be protein-rich. For vegans this means either extra-firm tofu or soy imitation-meat products. For lacto-ovo vegetarians, it can also include dairy and egg protein-rich sources in addition to vegan sources of protein. For omnivores, the choice of proteins is even wider.
</p>
<div class="modal-image">
<img src="img/1-3plate1.png"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary zero-border" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success zero-border btn-next-slide-1" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div> <!-- PROTEIN MODAL END-->
这个模式的h4和div应该被替换
<div class="modal fade colorful-culinary-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <!-- COLORFUL-CULINARY MODAL START-->
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Colorful Carbohydrates</h4>
</div>
<div class="modal-body">
<p>
Next, fill the other two-thirds of your plate with colorful carbohydrates, primarily non-starchy vegetables and small amounts of fruits to balance the protein as shown below.
</p>
<p>
Here are two very practical hints when it comes to carbohydrates. First, the more white (white bread, white pasta, white rice, and white potatoes) you put on your plate, the more inflammation you are going to create. Second, the more non-starchy vegetables you consume and the fewer grains and starches you eat (ideally none), the better the results. Scientifically, it’s called lowering the glycemic load of the meal.
</p>
<div class="modal-image">
<img src="img/2-3plate1-1.png"/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary zero-border" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success zero-border btn-next-slide-2" data-dismiss="modal">Next</button>
</div>
</div>
</div>
</div> <!-- COLORFUL-CULINARY MODAL END-->
目前,我只是打开和关闭模态,这是多余的。简单地替换文本会更有效率。
$(document).ready(function()
{
$('.colorful-culinary-button').click(function()
{
$('.colorful-culinary-modal').modal('show');
});
$('.protein-button').click(function()
{
$('.protein-modal').modal('show');
});
$('.fat-button').click(function()
{
$('.fat-modal').modal('show');
});
$('.btn-next-slide-1').click(function()
{
$('.colorful-culinary-modal').modal('show');
});
$('.btn-next-slide-2').click(function()
{
$('.fat-modal').modal('show');
});
$('.diet-builder-button').click(function()
{
$('.diet-builder-modal').modal('show');
});
});
您可以按照这个例子来制作它(需要根据您的代码进行调整,但这个想法应该有效)。
HTML(模态):
<div id="container">
<p>this is the first text in the modal</p>
</div>
<input id="nextBtn" type="button" value="NEXT"/>
jQuery:
$(document).ready(function() {
var objPos = 1;
var ajaxReturnObj = ["this is the first text in the modal","this is the second text in the modal","this is the third text in the modal"];
$('#nextBtn').click(function(){
$('#container p').text(ajaxReturnObj[objPos]);
objPos++;
});
});
http://fiddle.jshell.net/tv4zwpn0/2/
如果您有一个静态页面,并且想要在不关闭下一个按钮上的模式对话框的情况下更改内容,则需要将内容静态存储在文件中。
我提出以下解决方案:
var eleToDisplay = ["next1", "next2"];
var indexOfEles = 0;
$('#btn').click(function () {
$("#dialog").dialog({
title: "Change text on Next without closing ",
resize: "auto",
modal: true,
buttons: {
"Next": function() {
$(this).html($('#' + eleToDisplay[indexOfEles]).html());
indexOfEles = ((indexOfEles + 1) >= eleToDisplay.length) ? 0 : indexOfEles + 1;
},
Close: function() {
$(this).dialog( "close" );
}
},
open: function() {
$(this).html($('#' + eleToDisplay[indexOfEles]).html());
indexOfEles = ((indexOfEles + 1) >= eleToDisplay.length) ? 0 : indexOfEles + 1;
$(this).parent().find('.ui-button:last').focus();
}
});
});
body {
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
font-size: 62.5%;
}
<link href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.11.3.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<!-- Skeleton of default dialog -->
<div id="dialog" title="Basic dialog">
<p></p>
</div>
<!-- The first dialog content -->
<div id="next1" style="display:none">
<p>
At every meal, divide your plate into three equal sections. On one-third of the plate put some low-fat protein that is no larger or thicker than the palm of your hand (that’s because some hands are larger than others).
</p>
<p>
This doesn’t have to be animal protein, but it has to be protein-rich. For vegans this means either extra-firm tofu or soy imitation-meat products. For lacto-ovo vegetarians, it can also include dairy and egg protein-rich sources in addition to vegan sources of protein. For omnivores, the choice of proteins is even wider.
</p>
<div class="modal-image">
<img src="img/1-3plate1.png"/>
</div>
</div>
<!-- The second dialog content -->
<div id="next2" style="display:none">
<p>
Next, fill the other two-thirds of your plate with colorful carbohydrates, primarily non-starchy vegetables and small amounts of fruits to balance the protein as shown below.
</p>
<p>
Here are two very practical hints when it comes to carbohydrates. First, the more white (white bread, white pasta, white rice, and white potatoes) you put on your plate, the more inflammation you are going to create. Second, the more non-starchy vegetables you consume and the fewer grains and starches you eat (ideally none), the better the results. Scientifically, it’s called lowering the glycemic load of the meal.
</p>
<div class="modal-image">
<img src="img/2-3plate1-1.png"/>
</div>
</div>
<button id='btn'>Click me</button>
相关文章:
- Angular Js 尝试从主按钮回调动态更改模态文本并且不起作用
- 当你有很多文本框时,如何从一个模态中只填充一个文本框
- 仅使用JAVASCRIPT单击链接或文本时显示模态
- Twitter 引导 - 点击时专注于模态内的文本区域
- 在模态激发后替换文本
- jQuery带有文本输入的模态消息
- AngularJS ng-click:如何将行数据传递到模态弹出文本框
- SemanticUI - 在模态中将焦点设置在文本区域上
- 获取<输入类型=“;文本“>它是在模态中动态创建的
- 当文本值大于$40时为模态-jQuery
- 关注引导浮动模态表单上自定义文本之后的文本区域
- 关闭模态不't清除文本区域数据,但它确实清除了模型
- 如何使用jQuery/AAJAX更改模态的文本
- 将图像和时尚文本传递到Bootstrap模态
- 在模态中自动调整文本区域的大小
- 从jquery模态弹出框中获取文本框值,其中包含重复器控件
- 将值传递给模态并显示为纯文本
- 隐藏模态后,模态中文本框的值没有被清除
- zurb foundation 4揭示模态改变数据中的文本:reveal-id=" mymodal;
- JQuery模态对话框与下拉列表和文本区域嵌入