利用bootbox.js插件实现自定义弹出层
<div class="modal-dialog modal-dialog-large">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">编辑内容</h4>
</div>
<div class="modal-body">
<h5>编辑区名称：首页头部图片轮播</h5>
<form id="content-form" action="/admin/content/edit/sliders" method="post">
<div id="onSuccessDiv" class="alert alert-success" style="display:none"><i class="glyphicon glyphicon-saved"></i> 成功保存编辑区内容。</div>
<div id="onFailureDiv" class="alert alert-danger" style="display:none"></div>
<div class="row" id="imagesList">
<#if indexImageList?has_content>
<#list indexImageList as item>
${item}
</#list>
<#else>
<div class="col-xs-6">暂无轮播图片！</div>
</#if>
</div>
<input type="hidden" name="blockType" value="">
<input type="hidden" name="cyclePager" value="<div class='cycle-pager'></div>">
<div class="form-group">
<div class="controls">
<textarea class="form-control" id="blockContent" rows="10" name="content" data-role="editor-field" style="z-index:1000;display:;"> ${(indexImageSliders)!''}</textarea>
</div>
</div>
<div class="form-group" style="padding-top:20px;border-top: 3px solid #eee;">
<div class="controls">
<button class="btn btn-default btn-sm" id="slide-upload" suimg type="button">上传图片</button>
<span class="help-block">请上传宽度不低于960px的图片</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">取消</button>
<button type="submit" class="btn btn-primary" data-toggle="form-submit" data-target="#content-form">保存</button>
</form>
</div>
</div>
</div>
<script src="/resources/js/bootbox.js"></script>
<script>
/* 图片上传 */
window.suimg = {
width:0,
height:0,
draw: function(node){
var suimg = $(node);
window.suimg.make_iframe(suimg);
suimg.bind("click.suimg", function(){
var suimg = $(this);
window.suimg.width = suimg.data("width")||120;
window.suimg.height = suimg.data("height")||120;
var file = this.uiframe.contents().find("input[type=file]");
file.bind("change", function(){
window.suimg_node = suimg;
file.parents("form:first").submit();
});
file.click();
});
},
callback: function(status, json){
bootbox.prompt("请输入跳转链接：", function(result) {
if(result == "" || result == null) {
alert("图片上传不成功");
window.suimg.make_iframe(window.suimg_node);
} else {
linkAndCallback(result,json);
}
});
},
make_iframe: function(suimg){
try{$(suimg)[0].uiframe.remove();}catch(e){}
var url = "/secure/upload/image?callback=parent.window.suimg.callback";
var iframe = $("<iframe class='suimg_iframe' style='display:none'></iframe>");
iframe.attr("src", url);
iframe.attr("frameborder", 0);
iframe.attr("width", 0);
iframe.attr("height", 0);
$(top.document.body).append(iframe);
$(suimg)[0].uiframe = iframe;
}
};
$.suimg = window.suimg;
$.fn.suimg = function() {
$.suimg.draw(this);
};
app.load('content/content-update');
$("#slide-upload").suimg();
//弹出输入框
function show_prompt(){
var value = prompt('请输入跳转链接：', '');
if(value == null){
return null;
}else if(value == ''){
alert("跳转链接不能为空！");
show_prompt();
}else{
return value;
}
}
//上传图片回调函数--中调用的方法
function linkAndCallback(obj,json){
var skiplink=obj;
var col=$("<div class='col-xs-3 col-md-6' id='colImages' > </div>");
//图片
var control=$("<div class='controls imagesContentLink'> </div>");
var imageA=$(" <a class='cycle-slide thumbnail' style='padding:0px;'> </a>")
imageA.css("margin-bottom:5px;");
imageA.attr('href', skiplink);//跳转链接
var imagetupi=$("<img alt=''>");
imagetupi.attr('src', json.url);
imageA.append(imagetupi);//
control.append(imageA);//
col.append(control);
//按钮
var btnDiv=$("<div style='float:right;margin-bottom:15px;padding-right:15px;'> </div>");
var editBtnDiv=$("<span class='btn btn-info editorImages' style='margin-right:10px;' onclick='editorImages(this);' >编辑</span>");
var delBtnDiv=$("<span class='btn btn-success deleteImages' onclick='deleteImages(this);' >删除</span>");
btnDiv.append(editBtnDiv);
btnDiv.append(delBtnDiv);
col.append(btnDiv);
$("#imagesList").append(col);
var tlink="http://www.hao123.com";
var c = $("#blockContent").val();
$("#blockContent").val(c + '\r\n <a href="'+skiplink+'" class="cycle-slide thumbnail" style="padding:0px;margin-bottom:5px;" target="_blank"><img src="' + json.url + '"/></a>');
//恢复form
window.suimg.make_iframe(window.suimg_node);
}
//删除图片
function deleteImages(obj){
if(confirm("你确定要删除吗？")){
$(obj).parents("#colImages").remove();
var content="";
var count= $("#imagesList #colImages").length;
//alert(count);
for(var i=0;i<count;i++){
var htmltxt = $("#imagesList #colImages").eq(i).children(".imagesContentLink").html();
content=content+htmltxt;
//alert(content)
}
$("#blockContent").val(content);
}
}
//编辑图片
function editorImages(obj){
var href= $(obj).parents("#colImages").children(".imagesContentLink").children(".thumbnail").attr("href");
bootbox.dialog({
message: "图片跳转链接:<input type='text' id='result' class='form-control' name='result' value='"+href+"' ></input>",
title: "修改图片跳转链接",
buttons: {
main: {
label: "确定",
className: "btn-primary",
callback: function() {
console.log("Hi "+ $('#result').val());
var result=$.trim($('#result').val());
if(result == "" || result == null) {
alert("图片跳转链接不能为空！");
return;
} else {
$(obj).parents("#colImages").children(".imagesContentLink").children(".thumbnail").attr("href",result);
var content="";
var count= $("#imagesList #colImages").length;
//alert(count);
for(var i=0;i<count;i++){
var htmltxt = $("#imagesList #colImages").eq(i).children(".imagesContentLink").html();
content=content+htmltxt;
//alert(content)
}
$("#blockContent").val(content);
}
}
}
}
});
}
</script>