标签:jquery javascript twitter-bootstrap bootstrap-modal
我想在模态内的单击按钮上获取引导模式的数据值.
这是我的模态 –
<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">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Cancel</h4>
</div>
<div class="modal-body">
Are you sure you want to cancel this?
</div>
<div class="modal-footer">
<button type="button" id="savebutton" class="btn btn-success" >Yes</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
以下是我将数据传递给模态的方式 –
更新 –
<button data-target='#myModal' id='link' data-toggle='modal' data-id="1" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 1</button>
<button data-target='#myModal' id='link' data-toggle='modal' data-id="2" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 2</button>
<button data-target='#myModal' id='link' data-toggle='modal' data-id="3" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel 3</button>
...
..
.
<button data-target='#myModal' id='link' data-toggle='modal' data-id="n" class='btn btn-danger cancel_modal' style='font-size:10px;padding:2px 5px;color:white;' >Cancel n</button>
可以从众多按钮中的任何一个调用模态,我只需要获取相关按钮的数据ID.例如 – 如果我点击“取消1”按钮,我会在点击模态中的“是”按钮后将数据ID设为1.
我想获取“id”字段的模态数据值,使用jQuery或javascript在此模式中单击“是”按钮时为1234.
最佳答案:
我修改了你的小提琴:
http://jsfiddle.net/exr00e0d/
你有过href.而不是我采取目标(模态).
$('.cancel_modal').click(function() {
//alert('called');
// we want to copy the 'id' from the button to the modal
var href = $(this).data('target');
var id = $(this).data('id');
// since the value of href is what we want, so I just did it like so
alert(href);
// used it as the selector for the modal
alert(id);
$(href).data('id', id);
});
标签:jquery,javascript,twitter-bootstrap,bootstrap-modal 来源: https://codeday.me/bug/20190516/1114799.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。