利用bootbox.js插件实现自定义弹出层

利用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;'  οnclick='editorImages(this);' >编辑</span>");
			var delBtnDiv=$("<span class='btn btn-success deleteImages' οnclick='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>