我试图在弹出窗口上放置一个summernote编辑器。我无法得到它。 请帮帮我。我也无法获得编辑部分,我想要标题栏,将标题显示为文本编辑器。
$(function() { // DOM loaded
$('#summernote').summernote();
$('.popupinfo').draggable({containment: "#containment-wrapper", scroll: false});
var openPopup = function(e) { // Function to open the popup
$(e).fadeIn(400);
$('#mask, .popupinfo').fadeIn(400);
};
var closePopup = function() { // Function to close the popup
$('#mask, .popupinfo').fadeOut(400);
};
$('a.open').click(function(e) {
e.preventDefault();
var popupbox = $(this).attr('href');
openPopup(popupbox);
var popMargTop = ($(popupbox).height()+24)/2;
var popMargLeft = ($(popupbox).width()+24)/2;
$(popupbox).css({
'margin-top': -popMargTop,
'margin-left': -popMargLeft
});
});
$('a.close, #mask').on('click', function() {
closePopup();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
closePopup();
}
});
});

body {
background: #e2e2e2;
margin: 0px;
padding: 0px;
color: #fff;
}
.popupinfo {
display: none;
background: #e2e2e2;
padding: 15px;
border: 1px solid #1852fd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
z-index: 99999;
box-shadow: 0px 0px 4px #1852fd;
-moz-box-shadow: 0px 0px 4px #1852fd;
-webkit-box-shadow: 0px 0px 4px #1852fd;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#mask {
display: none;
background: #9ACD32;
position: fixed;
left: 0;
top: 0;
z-index: 88888;
width: 100%;
height: 100%;
opacity: 0.2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css" rel="stylesheet"/>
<div id="mask"></div>
<div class="clearfix">
<a href="#popup-box" class="btn btn-circle btn-sm default">
Open <i class="fa fa-user"></i>
</a>
</div>
<div id="popup-box" class="popupinfo">
<form>
<div name="summernote" id="summernote" cols="30" rows="10"></div>
</form>
</div>
&#13;
提前致谢!
答案 0 :(得分:0)
请更改脚本加载的顺序:
&#34; jquery.min.js&#34;
这应首先加载,然后才会起作用。查看一些带引导程序的jQuery示例,并了解脚本加载。