问题

时间：2017-11-01 11:10:21

标签： javascript html css modal-dialog

我用HTML / CSS和Javascript创建了一个简单的模态。 Modal正在按照我希望的方式工作。我唯一的问题是文本中我要显示的最后一个字总是以新的一行显示。

Image 1 Image 2

＆＃13;
＆＃13; 
function revealModal(divID) {
  window.onscroll = function() {
    document.getElementById(divID).style.top = document.body.scrollTop;
  };
  document.getElementById(divID).style.display = "block";
  document.getElementById(divID).style.top = document.body.scrollTop;
}

function hideModal(divID) {
  document.getElementById(divID).style.display = "none";
}

function showOKPopUp(message) {
  var confirmText = '<div class="modalBody">' +
    '<table width="100%" border="5" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">' +
    '<tr> <td bgcolor="#D6E3F7"><table width="95%" border="0" align="center" cellpadding="10" cellspacing="0" >' +
    '<tr><td align="center" valign="top" bgcolor="#D6E3F7" style="padding:5px" class="text-b" ><label><br />' +
    message +
    '</label></td>' +
    '</tr><tr><td align="center" valign="top" bgcolor="#D6E3F7" style="padding:5px" class="text-b" >' +
    '&nbsp;</td></tr><tr>' +
    '<td align="center" valign="top" bgcolor="#D6E3F7" style="padding:5px" class="text-b" >' +
    '<span class="text-b" style="padding:5px"> <br />' +
    '<input name="Submit32" onclick="hideModal(\'modalPage\')"  type="button" class="b_st" value="OK" />' +
    '<br /><br /></span></td></tr></table></td></tr></table></div>';

  document.getElementById('modalPage').getElementsByTagName('div')[1].innerHTML = confirmText;
  revealModal('modalPage');
}
＆＃13; 
.text-b {
  font-family: Arial;
  font-size: 14px;
  color: #000000;
}

.b_st {
  width: 60px;
  background-color: #5585CC;
  padding: 2px;
  border: 1px #000000 solid;
  font-family: Arial;
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
}

#mask {
  height: 100%;
  width: 100%;
  background: #000000;
  position: absolute;
  top: 0;
  -moz-opacity: 0.75;
  -khtml-opacity: 0.75;
  opacity: 0.75;
  filter: alpha(opacity=75);
}

#popup {
  margin: 0 auto;
  border: 1px solid #000000;
  background: #ffffff;
  position: absolute;
  top: 200px;
  left: 25%;
}

#modalPage {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.modalBackground {
  filter: Alpha(Opacity=40);
  -moz-opacity: 0.4;
  opacity: 0.4;
  width: 100%;
  height: 100%;
  background-color: #999999;
  position: absolute;
  z-index: 500;
  top: 0px;
  left: 0px;
}

.modalContainer {
  position: absolute;
  width: 300px;
  left: 50%;
  top: 50%;
  z-index: 750;
}

.modal {
  background-color: white;
  border: solid 4px black;
  position: relative;
  top: -150px;
  left: -150px;
  z-index: 1000;
  width: 300px;
  height: 300px;
  padding: 0px;
}

.modalTop {
  width: 292px;
  background-color: #000099;
  padding: 4px;
  color: #ffffff;
  text-align: right;
}

.modalTop a,
.modalTop a:visited {
  color: #ffffff;
}

.modalBody {
  position: absolute;
  top: -150px;
  left: -150px;
}
＆＃13; 
<div id="modalPage">
  <div class="modalBackground"></div>
  <div class="modalContainer"></div>
</div>
<button type="button" onclick="showOKPopUp('Hello There!!')">Show Modal</button>
＆＃13;
＆＃13;
＆＃13;

我无法弄清楚为什么会这样。可能是我错过了什么。
任何帮助将不胜感激。

2 个答案:

答案 0 :(得分：0)

如果您想将段落放在一行中，则必须使用white-space: nowrap; label，检查更新后的代码段。

function revealModal(divID) {
  window.onscroll = function() {
    document.getElementById(divID).style.top = document.body.scrollTop;
  };
  document.getElementById(divID).style.display = "block";
  document.getElementById(divID).style.top = document.body.scrollTop;
}

function hideModal(divID) {
  document.getElementById(divID).style.display = "none";
}

function showOKPopUp(message) {
  var confirmText = '<div class="modalBody">' +
    '<table width="100%" border="5" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">' +
    '<tr> <td bgcolor="#D6E3F7"><table width="95%" border="0" align="center" cellpadding="10" cellspacing="0" >' +
    '<tr><td align="center" valign="top" bgcolor="#D6E3F7" style="padding:5px" class="text-b" ><label><br />' +
    message +
    '</label></td>' +
    '</tr><tr><td align="center" valign="top" bgcolor="#D6E3F7" style="padding:5px" class="text-b" >' +
    '&nbsp;</td></tr><tr>' +
    '<td align="center" valign="top" bgcolor="#D6E3F7" style="padding:5px" class="text-b" >' +
    '<span class="text-b" style="padding:5px"> <br />' +
    '<input name="Submit32" onclick="hideModal(\'modalPage\')"  type="button" class="b_st" value="OK" />' +
    '<br /><br /></span></td></tr></table></td></tr></table></div>';

  document.getElementById('modalPage').getElementsByTagName('div')[1].innerHTML = confirmText;
  revealModal('modalPage');
}
.text-b {
  font-family: Arial;
  font-size: 14px;
  color: #000000;
}

.b_st {
  width: 60px;
  background-color: #5585CC;
  padding: 2px;
  border: 1px #000000 solid;
  font-family: Arial;
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
}

#mask {
  height: 100%;
  width: 100%;
  background: #000000;
  position: absolute;
  top: 0;
  -moz-opacity: 0.75;
  -khtml-opacity: 0.75;
  opacity: 0.75;
  filter: alpha(opacity=75);
}

#popup {
  margin: 0 auto;
  border: 1px solid #000000;
  background: #ffffff;
  position: absolute;
  top: 200px;
  left: 25%;
}

#modalPage {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.modalBackground {
  filter: Alpha(Opacity=40);
  -moz-opacity: 0.4;
  opacity: 0.4;
  width: 100%;
  height: 100%;
  background-color: #999999;
  position: absolute;
  z-index: 500;
  top: 0px;
  left: 0px;
}

.modalContainer {
  position: absolute;
  width: 300px;
  left: 50%;
  top: 50%;
  z-index: 750;
}

.modal {
  background-color: white;
  border: solid 4px black;
  position: relative;
  top: -150px;
  left: -150px;
  z-index: 1000;
  width: 300px;
  height: 300px;
  padding: 0px;
}

.modalTop {
  width: 292px;
  background-color: #000099;
  padding: 4px;
  color: #ffffff;
  text-align: right;
}

.modalTop a,
.modalTop a:visited {
  color: #ffffff;
}

.modalBody {
  position: absolute;
  top: -150px;
  left: -150px;
max-width: 100%;
min-width: 140px;
}
<div id="modalPage">
  <div class="modalBackground"></div>
  <div class="modalContainer"></div>
</div>
<button type="button" onclick="showOKPopUp('Hello There!!')">Show Modal</button>

<强>更新

我已移除white-space: nowrap;并为min-width添加了max-width和.modalBody，请再次检查该代码段。

答案 1 :(得分：0)

设置

label{
   white-space: nowrap;
}

所以它会起作用

＆＃13;
＆＃13; 
function revealModal(divID) {
  window.onscroll = function() {
    document.getElementById(divID).style.top = document.body.scrollTop;
  };
  document.getElementById(divID).style.display = "block";
  document.getElementById(divID).style.top = document.body.scrollTop;
}

function hideModal(divID) {
  document.getElementById(divID).style.display = "none";
}

function showOKPopUp(message) {
  var confirmText = '<div class="modalBody">' +
    '<table width="100%" border="5" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">' +
    '<tr> <td bgcolor="#D6E3F7"><table width="95%" border="0" align="center" cellpadding="10" cellspacing="0" >' +
    '<tr><td align="center" valign="top" bgcolor="#D6E3F7" style="padding:5px" class="text-b" ><label><br />' +
    message +
    '</label></td>' +
    '</tr><tr><td align="center" valign="top" bgcolor="#D6E3F7" style="padding:5px" class="text-b" >' +
    '&nbsp;</td></tr><tr>' +
    '<td align="center" valign="top" bgcolor="#D6E3F7" style="padding:5px" class="text-b" >' +
    '<span class="text-b" style="padding:5px"> <br />' +
    '<input name="Submit32" onclick="hideModal(\'modalPage\')"  type="button" class="b_st" value="OK" />' +
    '<br /><br /></span></td></tr></table></td></tr></table></div>';
  document.getElementById('modalPage').getElementsByTagName('div')[1].innerHTML = confirmText;
  revealModal('modalPage');

}
＆＃13; 
.text-b {
  font-family: Arial;
  font-size: 14px;
  color: #000000;
}

.b_st {
  width: 60px;
  background-color: #5585CC;
  padding: 2px;
  border: 1px #000000 solid;
  font-family: Arial;
  font-size: 11px;
  font-weight: bold;
  color: #FFFFFF;
}

#mask {
  height: 100%;
  width: 100%;
  background: #000000;
  position: absolute;
  top: 0;
  -moz-opacity: 0.75;
  -khtml-opacity: 0.75;
  opacity: 0.75;
  filter: alpha(opacity=75);
}

#popup {
  margin: 0 auto;
  border: 1px solid #000000;
  background: #ffffff;
  position: absolute;
  top: 200px;
  left: 25%;
}

#modalPage {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.modalBackground {
  filter: Alpha(Opacity=40);
  -moz-opacity: 0.4;
  opacity: 0.4;
  width: 100%;
  height: 100%;
  background-color: #999999;
  position: absolute;
  z-index: 500;
  top: 0px;
  left: 0px;
}

.modalContainer {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  z-index: 750;
}

.modal {
  background-color: white;
  border: solid 4px black;
  position: relative;
  top: -150px;
  left: -150px;
  z-index: 1000;
  width: 300px;
  height: 300px;
  padding: 0px;
}

.modalTop {
  width: 292px;
  background-color: #000099;
  padding: 4px;
  color: #ffffff;
  text-align: right;
}

.modalTop a,
.modalTop a:visited {
  color: #ffffff;
}

.modalBody {
  position: absolute;
  top: -50px;
  left: -150px;
}

label {
  white-space: nowrap;
}
＆＃13; 
<div id="modalPage">
  <div class="modalBackground"></div>
  <div class="modalContainer"></div>
</div>
<button type="button" onclick="showOKPopUp('Hello There!!')">Show Modal</button>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题