您好我已经决定使用Bootbox.js作为一种简单的方法来合并一个bootstrap模式,这样我就可以让用户在发布表单并进行更改之前确认他们的选择.
我在我的默认布局文件中使用Laravel,jQuery,Bootstrap和Bootbox.js:
Layout.blade.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"></script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="js/vendor/bootbox.js"></script>
用户页面:
{{Form::open('choice')}}
@foreach($items as $item)
<tr>
<td>{{ HTML::image($item->image, '', array('class' => 'img img-rounded', 'width' => '100px', 'height' => '100px')) }}</td>
<td>{{$item->name}}</td>
<td>{{ $item->desc }}</td>
<td>{{ Form::radio('item', $item->item_id)}}</tr>
@endforeach
</tbody>
</table>
{{ Form::submit('Confirm Choice', array('class' => 'btn btn-success btn-block')) }}
<script>
$(document).ready(function() {
$(document).on("click", ".alert", function(e) {
bootbox.confirm("Are you happy with the decision you have made?", "I have changed my mind", "I …我的twitter BootBox打开如下:
bootbox.dialog("{{$steps[0]}}");
十秒后,我关闭我的BootBox,如下所示:
window.setTimeout(function(){
bootbox.hideAll();
}, 10000);
是否有可能在BootBox中显示剩余的秒数直到关闭？
我正在使用bootbox警报.它工作正常但加载警报后我的浏览器的滚动条变得消失,我无法滚动我的页面
bootbox.dialog({
closeButton:false,
message: "Do you clear all contents?",
title: "Are you sure to clear all contents?",
buttons: {
main: {
label: "Cancel",
className: "btn-primary btn-small",
callback: function(result) {
}
},
danger: {
label: "Clear!",
className: "btn-danger btn-small",
callback: function(result) {
// clear contents from here
content_id.find(".canvas_frame").html("");
$(".sidebar").find(".tbProperties").hide();
showtbBoxpanel(); // $(".sidebar").find(".tbBoxpanel").show();
}
}
}
});
单击"alert3"类的按钮时出现的提示弹出窗口不会关闭.
<a href="#" class="btn btn-primary btn-lg alert3">CLICKMEMEMEMEMEME</a>
这是我正在调用的函数:
<script>
$(document).on("click", ".alert3", function(e) {
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
Example.show("Prompt dismissed");
} else {
Example.show("Hi <b>"+result+"</b>");
}
});
});
</script>
我正在尝试使用bootbox模式创建一个bootstrap弹出窗口,在form中有一个带有屏蔽输入的输入文本,但弹出窗口内的任何事件都不起作用.
见这里:http://jsfiddle.net/ens1z/UK6x5/5/
html:
<p>The mask input below WORKS great</p>
<p>
<input type="text" class="mask" />
</p>
<a href="#" class="btn btn-inverse" id="asssf">OPEN BOOTBOX</a>
<div id="frm" style="visibility: hidden">
<div class="form-horizontal">
<p>The mask input below DON´T WORK. :-(</p>
<input type="text" class="mask"/>
</div>
</div>
JavaScript的:
$("#asssf").click(function (e) {
e.preventDefault();
bootbox.dialog({
message: $("#frm").html(),
title: "Custom title",
buttons: {
success: {
label: "Success!",
className: "btn-danger",
callback: function() {
return;
}
}
}
});
$(".mask").mask("999-99-9999",{placeholder:"_"});
});
$(".mask").mask("999-99-9999",{placeholder:"_"});
如何掩盖弹出窗口内的作品？
谢谢,
我正在使用bootstrap和bootbox插件,我有这个代码
这是插件http://bootboxjs.com/#download的链接
我正在显示带有数据属性的nex选项卡,我需要的是当用户单击第二个以显示引导框警报并阻止第二个选项卡显示检查按钮是否未检查？
HTML
<div class="tab-content">
<div class="tab-pane fade in active" id="step-1">
<p>First</p>
<p><input type="checkbox" name="user" value="user">I am not robot</p>
</div>
<div class="tab-pane fade" id="step-2">
<p>Second</p>
</div>
</div>
<a class="pull-left" data-toggle="tab" href="#step-1">First</a>
<a class="pull-right" data-toggle="tab" href="#step-2">Second</a>
JS
$("a").click(function() {
bootbox.alert("Please check!", function() {
event.preventDefault();
});
});
这是工作小提琴 http://jsfiddle.net/08997uok/1/
我找到了活动
$(document).on( 'shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
bootbox.alert("Please check!", function() {
event.preventDefault();
});
})
但问题是如何预防？
这是一些解决方案？
$('[data-toggle="tab"]').click(function(event) {
if(!$('[name="user"]').is(':checked') && $(event.target).attr('data-toggle') == 'tab'){
event.preventDefault();
bootbox.alert("Please check!", function() {
});
return …我想自定义bootbox prompt输入框.我想clsss在input元素中添加属性.
我试试这段代码
bootbox.prompt({
title: 'Enter Mobile Number',
placeholder: '8801XXXXXXXXX',
buttons: {
confirm: {
label: 'Submit'
}
},
callback: function(value) {
console.log(value);
})
});
我想要那样的东西
bootbox.prompt({
title: 'Enter Mobile Number',
placeholder: '8801XXXXXXXXX',
class: 'only-number',
buttons: {
confirm: {
label: 'Submit'
}
},
callback: function(value) {
console.log(value);
})
});
更新
根据Guruprasad Rao回答,我更新了我的代码.但是class属性在div元素中添加input元素.
bootbox.prompt({
title: 'Enter Mobile Number',
placeholder: '8801XXXXXXXXX',
className: 'only-number',
buttons: {
confirm: {
label: 'Submit'
}
}, …在bootbox之前,我在gridview的aspx文件中做了这个;
<asp:Button ID="btnDelete" CssClass="btn btn-danger" OnClientClick="if(!confirmDelete()) return false;" runat="server" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" CausesValidation="false" CommandName="DeleteRow" Text="Delete"/>
和js文件;
function confirmDelete() {
return confirm("Are you sure you want to delete the record?"); }
并通过确认,触发gridview的RowCommand并完成删除.
有了bootbox,我真的被卡住了.我知道bootbox是异步并尝试使用'preventDefault',但它不起作用.那么如何将上面的js文件转换为bootbox版本呢？提前致谢.
JS小提琴:http://jsfiddle.net/9y7nrx9m/2/
我最初创建一个bootbox对话框:
// First dialog
bootbox.dialog({
message: '<input type="button" value="Open second modal" class="second" />' + '<br/>bar'.repeat(100),
allowCancel: true
});
滚动现在会影响对话框并且网页保持原位.
// Second dialog
bootbox.dialog({message: "Second dialog!", allowCancel: true});
创建另一个引导框对话框/警报/提示并关闭它后,滚动不再影响第一个对话框.网页内容移动,第一个对话框保持冻结状态(意外行为).我该如何解决？
可以单击第一个对话框上可见的任何按钮,并且主页面上的按钮不可单击(预期行为).
如何添加一个选项来调整大小bootbox.alert();？
我正在使用Bootbox 4.3.0.
bootbox.alert("Success",function(){
});
这是bootbox.js库的链接.