MUI Modal方式显示其他页面的内容
显示的内容如果的样式无效
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
<script src="../js/jquery.min.js"></script>
<script src="../js/mui.min.js"></script>
</head> <body>
<a onclick="show()">显示模态</a>
<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-collapse-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div> <div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
<div class="mui-button-row">
<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">确认</button>
<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">取消</button>
</div>
</form>
</div>
</li>
</ul>
</div>
</div> <div id="modal" class="mui-modal"></div>
<script>
function show(){
var html=`<div class="mui-content">
<div class="mui-card">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<div class="mui-collapse-content">
<form class="mui-input-group">
<div class="mui-input-row">
<label>Input</label>
<input type="text" placeholder="普通输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div> <div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-clear" placeholder="带清除按钮的输入框">
</div>
<div class="mui-input-row">
<label>Input</label>
<input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入">
</div>
<div class="mui-button-row">
<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">确认</button>
<button class="mui-btn mui-btn-primary" type="button" onclick="return false;">取消</button>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>`;
$('#modal').addClass('mui-active').html(html); }
</script>
</body>
</html>
1 个回复
海哥591 (作者) - IT
附件如下