详情详情模态框

                            详情详情模态框
开发工具与关键技术:Visual Studio 2015 
作者:李仁海
撰写时间:2019.4.7

一、详情详情模态框html
在这里插入图片描述
图1
1、首先function然后写一个自定义美年名称searchTitDetail(值题目IDTitleID) ,之后根据题目ID查询题目信息,post设置控制器路径selectTitleDetail,然后根据题目的ID查询题目的信息 { TitleID: TitleID }, function给个值 (data) ,输出一下console.log(data);
2、判断if当前题目是否为选择题,也就是data.TitleTypeID == 3是否等于3,如果等于3就是判断题,因为在数据库里判断题是3,所以等于3就是判断题;

3、获取题干IDKaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲title"),设置个值为ht…("#option")清空选项,empty就是清空的意思;并且获取ID KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲option")拼接选项内容,…("#rightKey").html(“√”)获取到这个为正确; else 获取的ID为$("#rightKey").html(“×”)那么就是为错误。
6、再之后else题干进行分割题干,题干格式、答案、修改测试,再进行var ArrStem = data.Stem.split("~~")再数据库的答案之前加上两个~号进行分割。
在这里插入图片描述
图2

7、for 循环、进行填写题干与选项的选择的答案、题干(var i = 0; i < ArrStem.length; i++) {
if 判断i等于 0 {,获取题干IDKaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲title").html(Ar…("#option").empty();进行清空选项,再他不管是判断题还是多选题、单选题的时候只要他们进行了切换那么就会进行清空选项里的内容或者是切换到判断题是选项里有只个选项,判断题只能两个选项,判断题、单选题就可以添加多个选项进去,empty代表着是清空的意思。}
8、else也就是判断了之后是不是判断题或者多选题、单选题,如果是判断题那么就不能添加,多选题、单选题就可以添加,再获取了选项ID进行拼接上p标签,才显示在浏览器上的选项添加成功后的效果显示模型{KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲option").append…("#rightKey").html(data.RightKey),也就是前面判断出来的结果,是不是正确的答案;如果是那么就根据前面判断给出正确的答案或者错误的答案。}});
10、/也就是最后一步了弹出题目详情模态框,获取详情模态框ID$("#modTitles")详情模态框这也是你新增或者上传上去的题干、答案、图片之类的都会显示在上面,.modal(“show”)这是显示的意思;}。
在这里插入图片描述
图3
(注释:这是现在跟老师学习MVC的一个项目的详情详情模态框

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个实现的示例代码: HTML部分: ```html <div class="item"> <div class="title">项目标题</div> <div class="description">项目描述内容,可能会很长,需要截断隐藏。在末尾添加省略号。点击<a href="#" class="more">查看详情</a>可以查看完整内容。</div> </div> <!-- 模态框 --> <div id="modal" class="modal"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">项目详情</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div id="modal-description"></div> </div> </div> </div> ``` CSS部分: ```css .item { display: flex; align-items: center; } .title { flex: 0 0 auto; width: 100px; } .description { flex: 1 1 auto; width: 200px; height: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .more { text-decoration: none; color: #007bff; cursor: pointer; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; } .modal-content { background-color: #fff; padding: 20px; max-width: 80%; max-height: 80%; overflow-y: auto; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #e9ecef; } .modal-title { margin: 0; } .modal-body { padding: 20px; } ``` JavaScript部分: ```javascript var modal = document.getElementById('modal'); var modalDescription = document.getElementById('modal-description'); var items = document.querySelectorAll('.item'); for (var i = 0; i < items.length; i++) { var item = items[i]; var description = item.querySelector('.description'); var more = item.querySelector('.more'); var fullDescription = description.innerHTML; more.addEventListener('click', function(event) { event.preventDefault(); modalDescription.innerHTML = fullDescription; modal.style.display = 'block'; }); } var closeButton = document.querySelector('#modal .close'); closeButton.addEventListener('click', function() { modal.style.display = 'none'; }); window.addEventListener('click', function(event) { if (event.target == modal) { modal.style.display = 'none'; } }); ``` 上述代码中,我们首先在HTML中添加了一个模态框的结构,并使用了Bootstrap的样式。在JavaScript中,我们首先获取模态框及其内容的DOM元素,并遍历所有的项目描述内容,为每个“查看详情”链接添加点击事件。点击事件中,我们将完整的项目描述内容赋值给模态框中的内容区域,并将模态框的显示样式设置为“block”。 同时,我们为模态框的“关闭”按钮和背景区域添加了点击事件,当点击这些区域时,模态框会隐藏。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值