GET রেসিপি
এই কাজের জন্য আপনি ইতিমধ্যে উপলব্ধ প্লাগইন এবং বুটস্ট্র্যাপ এক্সটেনশনগুলি ব্যবহার করতে পারেন। অথবা আপনি কেবলমাত্র 3 টি লাইনের কোড দিয়ে নিজের কনফার্মেশন পপআপ তৈরি করতে পারেন । এটা দেখ.
বলুন যে আমাদের এই লিঙ্কগুলি ( data-hrefপরিবর্তে নোট href) বা বোতামগুলি রয়েছে যা আমরা এর জন্য নিশ্চিতকরণ মুছতে চাই:
<a href="#" data-href="delete.php?id=23" data-toggle="modal" data-target="#confirm-delete">Delete record #23</a>
<button class="btn btn-default" data-href="/delete.php?id=54" data-toggle="modal" data-target="#confirm-delete">
Delete record #54
</button>
এখানে #confirm-deleteআপনার এইচটিএমএলে একটি মডেল পপআপ ডিভ দেখায়। এটিতে "ঠিক আছে" বোতামটি এমনভাবে কনফিগার করা উচিত:
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-ok">Delete</a>
</div>
</div>
</div>
</div>
মুছার ক্রিয়াটি নিশ্চিতযোগ্য করে তুলতে এখন আপনার কেবল এই ছোট জাভাস্ক্রিপ্টের প্রয়োজন:
$('#confirm-delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});
সুতরাং show.bs.modalইভেন্টে মুছুন বোতামটি hrefসম্পর্কিত রেকর্ড আইডি সহ URL এ সেট করা আছে।
ডেমো: http://plnkr.co/edit/NePR0BQf3VmKtuMmhVR7?p= পূর্বরূপ
পোষ্ট রেসিপি
আমি বুঝতে পারি যে কিছু ক্ষেত্রে পোস্টের সম্পাদনের প্রয়োজন হতে পারে বা অনুরোধ না করে বরং জেট করুন। এটি খুব বেশি কোড ছাড়াই এখনও বেশ সহজ। এই পদ্ধতির সাথে নীচে ডেমোটি দেখুন:
// Bind click to OK button within popup
$('#confirm-delete').on('click', '.btn-ok', function(e) {
var $modalDiv = $(e.delegateTarget);
var id = $(this).data('recordId');
$modalDiv.addClass('loading');
$.post('/api/record/' + id).then(function() {
$modalDiv.modal('hide').removeClass('loading');
});
});
// Bind to modal opening to set necessary data properties to be used to make request
$('#confirm-delete').on('show.bs.modal', function(e) {
var data = $(e.relatedTarget).data();
$('.title', this).text(data.recordTitle);
$('.btn-ok', this).data('recordId', data.recordId);
});
// Bind click to OK button within popup
$('#confirm-delete').on('click', '.btn-ok', function(e) {
var $modalDiv = $(e.delegateTarget);
var id = $(this).data('recordId');
$modalDiv.addClass('loading');
setTimeout(function() {
$modalDiv.modal('hide').removeClass('loading');
}, 1000);
// In reality would be something like this
// $modalDiv.addClass('loading');
// $.post('/api/record/' + id).then(function() {
// $modalDiv.modal('hide').removeClass('loading');
// });
});
// Bind to modal opening to set necessary data properties to be used to make request
$('#confirm-delete').on('show.bs.modal', function(e) {
var data = $(e.relatedTarget).data();
$('.title', this).text(data.recordTitle);
$('.btn-ok', this).data('recordId', data.recordId);
});
.modal.loading .modal-content:before {
content: 'Loading...';
text-align: center;
line-height: 155px;
font-size: 20px;
background: rgba(0, 0, 0, .8);
position: absolute;
top: 55px;
bottom: 0;
left: 0;
right: 0;
color: #EEE;
z-index: 1000;
}
<script data-require="jquery@*" data-semver="2.0.3" src="//code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<div class="modal fade" id="confirm-delete" 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete <b><i class="title"></i></b> record, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-danger btn-ok">Delete</button>
</div>
</div>
</div>
</div>
<a href="#" data-record-id="23" data-record-title="The first one" data-toggle="modal" data-target="#confirm-delete">
Delete "The first one", #23
</a>
<br />
<button class="btn btn-default" data-record-id="54" data-record-title="Something cool" data-toggle="modal" data-target="#confirm-delete">
Delete "Something cool", #54
</button>
ডেমো: http://plnkr.co/edit/V4GUuSueuuxiGr4L9LmG?p= পূর্বরূপ
বুটস্ট্র্যাপ 2.3
বুটস্ট্র্যাপ ২.৩ মডেলের জন্য যখন আমি এই প্রশ্নের উত্তর দিচ্ছিলাম তখন আমি তৈরি কোডটির একটি আসল সংস্করণ এখানে।
$('#modal').on('show', function() {
var id = $(this).data('id'),
removeBtn = $(this).find('.danger');
removeBtn.attr('href', removeBtn.attr('href').replace(/(&|\?)ref=\d*/, '$1ref=' + id));
});
ডেমো : http://jsfiddle.net/MjmVr/1595/
