如何实现在confirm弹框中加几个单选框?(基于mui框架实现)
css:
.modal {display: none;/* 默认隐藏 */position: fixed;/* 固定定位 */z-index: 1;/* 设置在顶层 */left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.4);}/* 弹窗内容 */.modal-content {background-color: #fefefe;margin: 50% auto;padding: 20px 0 0 0;border: 1px solid #888;border-radius: 16px;width: 80%;}/* 关闭按钮 */.close {width: 50%;height: 39px;color: #C1080D;font-size: 17px;border: none;border-left: 1px solid #f5f5f5;display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center;}.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}.sure_select {width: 100%;display: flex;flex-direction: row;justify-content: space-around;border-top: 1px solid #F5F5F5;}.cancel {width: 50%;height: 39px;color: #c3c3c3;font-size: 17px;border: none;border-bottom-right-radius: 16px;display: flex;flex-direction: row;justify-content: center;align-items: center;align-content: center;}
html:
<div id=\"myModal\" class=\"modal\"><!-- 弹窗内容 --><div class=\"modal-content\"><div class=\"mui-input-row mui-radio mui-left\"><label>1.挂号小秘书(全国网络医院,服务不限次)</label><input name=\"radio1\" type=\"radio\" style=\"top: 8px;\"></div><div class=\"mui-input-row mui-radio mui-left\"><label>2.苏州儿童医院普通门诊预约</label><input name=\"radio1\" type=\"radio\" style=\"top: 8px;\"></div><div class=\"mui-input-row mui-radio mui-left\"><label>3.苏州儿童医院专家门诊预约</label><input name=\"radio1\" type=\"radio\" style=\"top: 8px;\"></div><div class=\"sure_select\"><div style=\"\" class=\"cancel\">取消</div><div style=\"width: 1px;height: 36px;color: #F5F5F5;\"></div><div style=\"\" class=\"close\">确定</div></div></div></div>
js:
// 获取弹窗var modal = document.getElementById(\'myModal\');// 打开弹窗的按钮对象var btn = document.getElementById(\"myBtn\");// 获取 <span> 元素,用于关闭弹窗var span = document.querySelector(\'.close\');//获取 確定 按鈕var sure = document.querySelector(\'.sure\');//获取 取消 按鈕var cancel = document.querySelector(\'.cancel\');// 点击按钮打开弹窗btn.onclick = function() {modal.style.display = \"block\";}// 点击 <span> (x), 关闭弹窗span.onclick = function() {modal.style.display = \"none\";}// 在用户点击其他地方时,关闭弹窗window.onclick = function(event) {if (event.target == modal) {modal.style.display = \"none\";}}// 在用户点击取消按鈕cancel.onclick = function(event) {modal.style.display = \"none\";}
实现效果: