Question

我有一个模式，我想重新用于删除确认。

所以基本上没有删除确认我会有一个按钮，当按下时，会发出一个POST（或DELETE）请求，如：

example.com/post/1231

我想以某种方式重复使用模态进行此类操作，有关如何执行此操作的提示吗？

当有人点击按钮时：

<a href="#" data-toggle="modal" data-target="#deleteConfirmModal">Delete</a>

如何在单击#deleteConfirm按钮时将信息传递给模态以发出POST / DELETE请求？

我在这里有一个模态的模板：

<div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="deleteLabel">Deleting a Notification</h4>
            </div>
            <div class="modal-body">
                <p>You have selected to delete this notification.</p>
                <p>
                    If this was the action that you wanted to do,
                    please confirm your choice, or cancel and return
                    to the page.
                </p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="deleteConfirm">Delete Notification</button>
            </div>
        </div>
    </div>
</div>

Answer 1

您可以使用JS API代替数据属性：

$('#deleteConfirmModal').modal('show');

然后将请求类型存储在某处，例如数据：

$('#deleteConfirmModal').data('request_type', 'DELETE');

＆＃13;

<!doctype html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
		<!-- Optional theme -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
		<!-- Latest compiled and minified JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    </head>
    <body>
        <a href="/post/1" data-request-type="delete" class="confirm-action">Delete</a>
        <a href="/post/1" data-request-type="update" class="confirm-action">Update</a>
		<div id="log"></div>
		<div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog" aria-labelledby="deleteLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title" id="deleteLabel">Deleting a Notification</h4>
					</div>
					<div class="modal-body">
						<p>You have selected to delete this notification.</p>
						<p>
							If this was the action that you wanted to do,
							please confirm your choice, or cancel and return
							to the page.
						</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-success" data-dismiss="modal">Cancel</button>
						<button type="button" class="btn btn-danger" id="deleteConfirm">Delete Notification</button>
					</div>
				</div>
			</div>
		</div>
    </body>

    <script>
        $('a.confirm-action').click(function(e) {
			e.preventDefault();
			var modal = $('#deleteConfirmModal');
			modal.data('url', $(this).attr('href'));
			modal.data('request_type', $(this).data('request-type'));
            modal.modal('show');
        });
		
		$('#deleteConfirm').click(function () {
			var modal = $('#deleteConfirmModal');
			var url = modal.data('url');
			var request_type = modal.data('request_type');
			$('#log').append('Sent ' + request_type + ' to ' + url + '<br>');
			modal.modal('hide');
		});
    </script>
</html>

＆＃13;

如何重新使用模态进行删除确认？

1 个答案: