プロジェクトの1つでbootstrapモーダルを使用しています。bootstrapモーダルを自動的に表示するために、タイマー関数を使用しています。
ユーザーがbootstrapモーダルを1分間閉じない場合、自動的にbootstrapモーダルを閉じる必要があります。
bootstrapモーダルを自動的に閉じるためのタイマーを設定するにはどうすればよいですか?
この問題の解決にご協力ください。
前もって感謝します :)
var mins;
var secs;
function cd() {
mins = 1 * m("");
secs = 0 + s(":"); // change seconds here (always add an additional second to your total)
console.log(mins);
console.log(secs);
redo();
}
function m(obj) {
for(var i = 0; i ";
if(mins :";
disp += "";
if(secs ";
return(disp);
}
function redo() {
secs--;
if(secs == -1) {
secs = 59;
mins--;
}
$('#myModal').on('shown', function() {
// remove previous timeouts if it's opened more than once.
clearTimeout(myModalTimeout);
// hide it after a minute
myModalTimeout = setTimeout(function() {
$('#myModal').modal('hide');
}, 5000);
});
document.getElementById('timer_container').innerHTML = dis(mins,secs);
if((mins == 1) && (secs == 45)) {
$("#myModal").modal('show');
$('#myModal').on('shown', function() {
// remove previous timeouts if it's opened more than once.
clearTimeout(myModalTimeout);
// hide it after a minute
myModalTimeout = setTimeout(function() {
$('#myModal').modal('hide');
}, 5000);
});
$('.timer-inc').click(function(){
$("#myModal").modal('hide');
href="includes/setSessionTime.php";
$.ajax({
type: "POST",
//data : {cat:"hai"},
cache: false,
url: href,
success: function(data){
console.log(data);
$("#results").html(data);
}
});
});
$('.timer-close').click(function(){
$("#myModal").modal('hide');
href="includes/clearcart.php";
$.ajax({
type: "POST",
//data : {cat:"hai"},
cache: false,
url: href,
success: function(data){
console.log(data);
$("#results").html(data);
}
});
});
$('#myModal').on('hidden', function () {
href="includes/clearcart.php";
$.ajax({
type: "POST",
//data : {cat:"hai"},
cache: false,
url: href,
success: function(data){
console.log(data);
$("#results").html(data);
}
});
});
}
else if((mins == 0) && (secs == 00)){
$("#myModal").modal('hide');
href="includes/clearcart.php";
$.ajax({
type: "POST",
//data : {cat:"hai"},
cache: false,
url: href,
success: function(data){
console.log(data);
$("#results").html(data);
}
});
}
else {
cd = setTimeout("redo()",1000);
}
}
function init() {
cd();
}
試してみてください
var myModal = $('#myModal').on('shown', function () {
clearTimeout(myModal.data('hideInteval'))
var id = setTimeout(function(){
myModal.modal('hide');
});
myModal.data('hideInteval', id);
})
示されているコールバックと組み合わせてsetTimeout
を使用できます。
$('#myModal').on('shown', function() {
// remove previous timeouts if it's opened more than once.
clearTimeout(myModalTimeout);
// hide it after a minute
myModalTimeout = setTimeout(function() {
$('#myModal').modal('hide');
}, 6e4);
});
関数の定義
function show_modal(){
$('#myModal').modal('show');
}
function hide_modal(){
$('#myModal').modal('hide');
}
読み込み中
$(window).load(function(){
$('#myModal').modal('show');
window.setTimeout(hide_modal, 60000);
});
あなたはこれを次のように使うことができます:
setTimeout(function(){$('#myModal').modal('hide')},3000);
これを試してください、$( '#someselector')。modal({show:false})
私はこの方法を使用しています(ブートストラップ3.2.0以降):
自動的に閉じたいすべてのモーダルのモーダルクラスに「modal-auto-clear」を追加します。
<div class="modal fade modal-auto-clear" id="modal_confirmation" tabindex="-1" role="dialog">
...
</div>
jQuery内:
$('.modal-auto-clear').on('shown.bs.modal', function () {
$(this).delay(7000).fadeOut(200, function () {
$(this).modal('hide');
});
})
クラス 'modal-auto-clear'のすべてのモーダルは、開いてから7秒後に閉じるようになりました(もちろん、この時間はjqueryコードで変更できます)。
モーダルごとに異なる自動クローズ時間を作成する場合は、これを行うことができます:
クラス 'modal-auto-clear'をモーダルクラスに追加し、属性data-timer = "3000"をモーダルdivに追加します。
<div class="modal fade modal-auto-clear" data-timer="3000" id="modal_confirmation" tabindex="-1" role="dialog">
<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">Your title</h4>
</div>
<div class="modal-body padded">Your body</div>
<div class="modal-footer">
<button type="button" id="close" data-dismiss="modal" aria-label="Close" class="btn btn-primary" style="display:none;">Close</button>
</div>
</div>
</div>
</div>
jQuery内:
$('.modal-auto-clear').on('shown.bs.modal', function () {
// if data-timer attribute is set use that, otherwise use default (7000)
var timer = $(this).data('timer') ? $(this).data('timer') : 7000;
$(this).delay(timer).fadeOut(200, function () {
$(this).modal('hide');
});
})
簡単..! :Dこの男を試してみてください!私を信じて。
$(window).load(function(){
setTimeout(function(){
$('#myModal').hide();
}, 60000);
});