使用js实现弹匣只是说说而已，尽量简洁，方便观看。 能否正常显示，目前只是试了一下！
360浏览器chrome 这是HTML代码
button id='js_show '打开弹匣/button！ -弹匣--- -即使修正divclass=' modal ' divclass=' modal-content ' divclass=' modal-body ' divclass=' MB _ revise ' p buttonbutton class='cancen '取消/button/div/div/div http://www.Sina.com /
/*掩膜层*/.modal { display: none； 定位：固定； top: 0； left: 0； width: 100%； height: 100%； background-color : rgba (0，0，0，0.2 )； z-index: 1； (/)弹舱(/.modal-content )位置： fixed； top: 15%； left: 50%； 边距-左：-25 %； width: 45%； height: 70%； 最小宽度： 31.125 rem； 最小高度： 18.625 rem； border-radius:125rem； background-color: white； z-index: 2； }.modal-body { position : relative； width: 100%； height: 100%； }.MB _ revise { padding :625 rem 001.5625 rem； }.MB _ revisep { padding-left :25 rem； 边距顶部：125 rem； font-family: 'FangSong '，Times，serif； 字体大小： 15px； border-left : solid.125 rem royal blue； (/)修正框(/.Xiugai ) Height:2em； width: 14.375rem； 边距顶部：625 rem； (/)确定和取消(*/.determine， cancen )位置： absolute； width: 3.625rem； height: 2.1875rem； color: #fff； border: 0； outline: none； box-shadow :125 rem.125 rem RGB (107、96、96 )； cursor: pointer； } .determine { right: 6.5rem； bottom:725rem； background-color : rgba (9，139，245，0.788 )； } .cancen { right: 2rem； bottom:725rem； background-color:rgba(212、37、37、0.788； } .determine:hover， cancen : hover { color : # fff； box-shadow :134 rem.1275 rem RGB (58、57、57 )； } .determine:active， cancen : active { box-shadow :134 rem.1275 rem rgba (230、227、227、 758 )； //打开弹匣var button=document.getelementbyid (js _ show )； button.onclick=function () varmodal=document.query selector ) '.modal ' )； modal.style.display='block '； //单击不关闭弹匣varcancen=document.query selector ('.cancen )； cancen.onclick=function () varmodal=document.query selector ('.modal ' )； modal.style.display='none '； } css