JavaScript的modal、dialog调用

最新推荐文章于 2025-04-30 17:41:59 发布

西瓜15

最新推荐文章于 2025-04-30 17:41:59 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/jiawen2012/article/details/115707131

本文记录了在页面中使用JavaScript操作dialog和modal时遇到的问题及解决方案。在设置元素初始值时，注意到input与select元素的清空方法不同，input需使用val(""),而select需使用text("")。此外，探讨了元素的可见性控制，如使用.attr("style","display:none")、.hide()、.show()和.toggle()，并提醒开发者这些方法在不同元素上可能效果不同，需要实践验证。" 118456222,10297079,优秀大学生保研推荐信模板,"['计算机保研', '教育', '学术']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面中使用dialog，并使用了模态-modal，在js中再去点击或者其他操作，基础不牢固，搞了一天，改了好久的事件！一定要记下来了。

首先看一下页面

<style>
.modal-child{
position:fixed;
top:inherit;
margin-top:5%;
margin-left:15%;
width:70%;
backgroud:#ffffff;
border-radius:5px;
padding:0px 5% 1% 5%;
}
</style>
<a id="insertBtn"value="0" data-toggle="modal" data-target="#modal_1">增</a>
<div class="modal fade"> id="modal_1" tabindex="-1" role="dialog" aria-labelledby="modal_1Lable" aria-hidden="true">
 <div class="modal-child">
  <text>页面内容</text>
   {%if not is_admin%}
    <div class="div-btn" style="text-align:right;width:96%;padding-bottom:8px">
      <button class="btn-cancel" type="button" data-dismiss="modal">取消</button>
      <button class="btn-sub" type="button" style="display:none">提交</button>
      <button class="btn-edit" type="button">编辑</button>
    </div>
   {%endif%}
 </div>
</div>

js页面在设置的时候只写一些重要的，剩下的就都省略了。有需要可以单独联系沟通。

在写设置页面元素初始值为空的时候，遇到了问题，input和select元素设置为空值的方法不一样，input设置为空值可以直接用val(""),而select元素则需要使用text(""),要不然就是无效操作，这个找了好几条都没有说，还是试出来的。

设置元素不可见，使用.attr("style","display:none");或者是.hide();显示相反，可以用.show(),或者是.toggle()，有的方法对有些元素不生效，所有可以自己试一下。

$(document).ready(function(){
//里面是页面初始化及点击事件类
  $("#insertBtn").click(function(){
    //点击增弹出modal，设置初始化页面元素内容。由于页面和编辑一起使用，所以需要设置初始化。
     dialog_init();
  });
  
  $(".btn-cancel").click(function(){
     dialog_init();
     $("#modal_1").hide();
  });
});
//外面是调用的各种function方法
function dialog_init(){
  $(".btn-edit").attr("style","display:none");
  $(".btn-sub").attr("style","display:display")
  //初始化内容
  $("#select").text("");
  $("#input1,#input2").val("");
}