javascript - 将变量从按钮传递到模态
问题描述
这是一个带引导程序的角度 1。
我有两个按钮:
<button type="button" data-toggle="modal" data-target="#myModal" data-name="jack">
Btn 1
</button>
<button type="button" data-toggle="modal" data-target="#myModal" data-name="jill">
Btn 2
</button>
然后我有一个模态:
<div id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
Hello name
</div>
</div>
</div>
</div>
我知道这可以很容易地用 javascript 控制器完成。但我想知道是否有可能在没有 javascript 的情况下解决这个问题。如果Btn 1
单击我想显示文本Hello jack
。如果Hello jill
被Btn 2
点击。基本上:我可以直接在视图中读取变量数据名称吗?
解决方案
没有Javascript是不可能的,但不添加Javascript 是可能的。<div>
你可以在模态框内和toggle-collapse
你想展示的地方玩一些东西。唯一的问题是您不能传递带有数据属性的文本,但我认为这与您想要的相同。
在我看来,最好写几行 Javascript,但你问是否可以在不添加自定义 Javascript 的情况下做到这一点,这是我的答案。如果有自定义data
属性,那是因为它们必须与 Javascript 一起使用。我希望能有所帮助。
JSFiddle:https ://jsfiddle.net/alvarofvr/p9fzydt7/22/
代码片段:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<span data-toggle="collapse" data-target="#jackText,#jackButton">
<button type="button" data-toggle="modal" data-target="#myModal">
Btn 1
</button>
</span>
<span data-toggle="collapse" data-target="#jillText,#jillButton">
<button type="button" data-toggle="modal" data-target="#myModal">
Btn 2
</button>
</span>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div id="jackButton" class="collapse">
<button type="button" class="close" data-toggle="collapse" data-target="#jackText,#jackButton" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div id="jillButton" class="collapse">
<button type="button" class="close" data-toggle="collapse" data-target="#jillText,#jillButton" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<h4 class="modal-title">"Hello Jack" or "Hello Jill"?</h4>
</div>
<div class="modal-body">
<div id="jackText" class="collapse">
Hello Jack
</div>
<div id="jillText" class="collapse">
Hello Jill
</div>
</div>
</div>
</div>
</div>
推荐阅读
- javascript - 在实现 css 中增加轮播高度
- javascript - 在 ChartJS 中使用多个图层对图表进行分组
- javascript - Angular js完整日历-从数据库加载的事件不能很好地融入日历
- php - 如何从数据库中获取数据并使用 php 中的下拉菜单将其显示到标签上?
- java - 构建 Apk 警告时发出警告:autovalue.shaded.com.google$.auto.common.$MoreElements$1
- mysql - 循环遍历表并根据条件添加条目
- python - 如何创建单个 Docker 容器(Node、Python、FFMPEG)?
- laravel - 如何在 laravel 模型中使用 if 语句
- reactjs - React +内联样式+外部js对象-图像未显示
- javascript - Vue:元素响应太慢而无法拖动事件