正确定制JQuery UI对话框的方法

时间：2017-12-26 06:36:30

标签： javascript jquery html css

我基本上想要实现的是自定义JQuery对话框。

考虑下面我有一个片段：

＆＃13;
＆＃13; 
$(document).ready(function() 
{
  var dialogAddPartDiv = $('#dialogAddPart');
  
  $('#showDialogButton').click(function() 
  {
     dialogAddPartDiv.dialog('open');
  });
  
  dialogAddPartDiv.dialog({
     autoOpen: false,
     modal: true,
     buttons:
     {
       'Save' : function(){}
     },
     beforeClose : function(event) 
     {
       if(!confirm("It won't be saved. Continue?"))
       {
         return false;
       }
       else 
       {
       }
     },
     width:500,
  });
});
＆＃13; 
.ui-widget.ui-widget-content 
{
    border: 2px solid #05788d;
}

.ui-widget-content 
{
    border: 3px solid #05788d
    background: #ffffff;
    color: #222222;
}
＆＃13; 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<body>


<button type="button" id="showDialogButton">+Show Dialog</button>

<div id="dialogAddPart">

<table>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td colspan="2"><input type="text" style="width:100%;" value=""></td>
</tr>

<tr>
<td>Test:</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td colspan="2"><input type="text" style="width:100%;" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>


</table>

</div>

</body>
＆＃13;
＆＃13;
＆＃13;

我尝试使用CSS自定义它以更改边框颜色，但它似乎无法正常工作。我实际上还需要定制＆＃34;关闭＆＃34;和＆＃34;保存＆＃34;按钮，但它甚至看起来更难的问题（例如，当我尝试在 .ui-widget-header 中应用make background：transparent 以便摆脱顶部的这个令人讨厌的灰色栏也不起作用。唯一一种让它起作用的方法是 .ui-dialog-titlebar 中的 display：none ，但它导致＆＃34;关闭＆＃34;按钮消失，这在我的情况下不好）。定制所有这些的正确方法是什么？

2 个答案:

答案 0 :(得分：0)

请检查一下。在jQuery Ui对话中，jQuery-ui.css已经提供了css。你需要用你的新css替换它。如果你想覆盖默认的CSS，那么你可以在css之后使用！important。例如color:#000如果要覆盖它，可以像这样使用color:#fff !important;。

$(document).ready(function() 
{
var dialogAddPartDiv = $('#dialogAddPart');
  
  $('#showDialogButton').click(function() 
  {
		dialogAddPartDiv.dialog('open');
  });
  
  dialogAddPartDiv.dialog(
  {
	autoOpen: false,
	modal: true,
	buttons:
	{
		'Save' : function(){}
	},
	beforeClose : function(event) 
	{
		if(!confirm("It won't be saved. Continue?"))
		{
		return false;
		}
		else 
		{
		}
	},
	width:500,
  });
});
.ui-widget.ui-widget-content 
{
    border: 2px solid #05788d;
}

.ui-widget-content 
{
	border: 3px solid #05788d
	background: #ffffff;
	color: #222222;
}

.ui-widget-header {
    background: red !important;
    border: none !important;
}
.ui-widget .ui-widget{
background:none;
}
button.ui-button.ui-corner-all.ui-widget {
    background: red;
    color: #fff;
    border: none;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<body>


<button type="button" id="showDialogButton">+Show Dialog</button>

<div id="dialogAddPart">

<table>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td colspan="2"><input type="text" style="width:100%;" value=""></td>
</tr>

<tr>
<td>Test:</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td colspan="2"><input type="text" style="width:100%;" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>


</table>

</div>

</body>

答案 1 :(得分：0)

我对您的代码进行了一些更改。在脚本中，我添加了一个新类作为父clas，即customDialog，更新了css到header并使用parentclass保存按钮我用新的css覆盖旧css。

希望它对你有用。谢谢！

＆＃13;
＆＃13; 
	$(document).ready(function() {
  var dialogAddPartDiv = $('#dialogAddPart');
		  
  $('#showDialogButton').click(function() 
  {
    dialogAddPartDiv.dialog('open');
  });
		  
  dialogAddPartDiv.dialog(
  {
    autoOpen: false,
	modal: true,
	buttons:
	{
	  'Save' : function(){}
	},
	beforeClose : function(event) 
	{
	  if(!confirm("It won't be saved. Continue?"))
	  {
	    return false;
	  }
	  else 
	  {
	  }
	},
	width:500,
  });
  $('.ui-dialog').addClass('customizeDialog');
});
＆＃13; 
  	.ui-widget.ui-widget-content 
{
    border: 2px solid #05788d;
}

.ui-widget-content 
{
	border: 3px solid #05788d;
	background: #ffffff;
	color: #222222;
}

/* Customize dialog css */
.ui-widget.ui-widget-content.customizeDialog{
	border: none;
	box-shadow: 0 5px 35px rgba(190, 184, 184, 0.65);
}
.customizeDialog .ui-widget-header, .customizeDialog .ui-button{
	background-color: transparent;
	background-image: none;
	color: #fff;
	border: 0;	
	padding: 0;
}
.customizeDialog .ui-button{
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
    padding: 10px;
    font-size: 13px;
}
.customizeDialog  .ui-dialog-titlebar-close{
	background: #ddd;
}
＆＃13; 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<body>


<button type="button" id="showDialogButton">+Show Dialog</button>

<div id="dialogAddPart">

<table>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td colspan="2"><input type="text" style="width:100%;" value=""></td>
</tr>

<tr>
<td>Test:</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td colspan="2"><input type="text" style="width:100%;" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>

<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>


</table>

</div>

</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题