Question

您好我正在关注使用自定义CSS文件过度使用默认弹出框样式的优秀教程。 http://benkaminski.com/2014/08/30/how-to-customize-bootstrap-3-popovers-individually-using-only-css/

我想在我的视图模型中使用ASP.NET MVC 4 bootstrap3和Razor视图在我的数据模型的字段上使用弹出窗口来显示焦点上的消息，告诉用户是否必须填写长网络注册字段形成。这样，如果他们错过了需要在注册表单末尾填充的字段，则无需重新填写表单。我想通过使用这样的代码在每个字段上使用Html帮助方法Html.TextBoxFor来实现这一点。

      Html.TextBoxFor(model => model.Address2, htmlAttributes: new
           {   data_container = "body",
               data_toggle = "popover",
               data_trigger = "focus",
               data_role = "tooltip",
               data_class = "arrrow",
               data_placement = "right",
               data_content = "Address2 is not mandatory field to complete"

           })

在上面的链接中，我想要合并类popover3，当用户将鼠标或标签放在字段上时，在视图中显示那些stlyes。从上面的教程中执行此操作的Html就是这样。

<div class="text-center example-class3" data-container="body" data-template='<div class="popover3" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>' data-toggle="popover" data-placement="right" data-content="Address2 is not a mandatory field"></div>

现在我想从Html Popover3中的上面的类中获取被覆盖的CSS的属性，并将其放在上面的帮助器方法中，以便在视图中显示增强的弹出窗口。如何将class = popover3属性放入Html TextBoxFor帮助器方法？这是我正在使用的CSS自定义类

.slick-header *, *:before, *.after {
-moz-box-sizing: content-box;
box-sizing: content-box;
}
    */


[class^="slickgrid_"],
[class^="slickgrid_"] div {
    -moz-box-sizing: content-box !important;
    -webkit-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

.slick-header-columns-dla {
    background: #0000BD;
    border-bottom: 1px solid #BBBBBB;
    color: #eeeeee;
    font: 10pt Calibri, 'Segoe UI', Arial, Verdana, Sans-Serif;
}

.slick-header-columns-nondla {
    background: #00B96A;
    border-bottom: 1px solid #BBBBBB;
    color: #eeeeee;
    font: 10pt Calibri, 'Segoe UI', Arial, Verdana, Sans-Serif;
}

.slick-cell {
    background-color: white;
    border-color: transparent #D4D4D4 #D4D4D4 transparent;
    border-style: solid solid solid solid;
    border-width: 0px 1px 1px 0px;
    font: 11pt Calibri, 'Segoe UI', Arial, Verdana, Sans-Serif;
    padding: 1px 1px 0px 2px;
}

.slick-header-columns {
    background-color: #0063B0;
    border-bottom: 1px solid #BBBBBB;
    box-sizing: content-box !important;
    color: #eeeeee;
    font: 10pt Calibri, 'Segoe UI', Arial, Verdana, Sans-Serif;
}



.selected-header {
    background-color: #E2E2E2;
    color: #217346;
    font-weight: bold;
}

.slick-column-name {
    display: block;
    margin-right: 14px;
    text-align: center;
    text-transform: uppercase;
}

input.editor-text {
    background: none;
    border: 0 none;
    font: 11pt Calibri, 'Segoe UI', Arial, Verdana, Sans-Serif;
    margin: 0;
    outline: 0 none;
    padding: 0;
    width: 100%;
}

/*Cell Border, custom*/

.slick-cell.active {
    border-color: #0063B0;
    border-style: solid;
    border-width: medium;
}

.slick-cell.invalid {
    -moz-animation-duration: 0.2s;
    -moz-animation-name: slickgrid-invalid-hilite;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-name: slickgrid-invalid-hilite;
    border-color: red;
}

@-moz-keyframes slickgrid-invalid-hilite {
    from { box-shadow: 0 0 6px red; }

    to { box-shadow: none; }
}

@-webkit-keyframes slickgrid-invalid-hilite {
    from { box-shadow: 0 0 6px red; }

    to { box-shadow: none; }
}





.example-class3 {
background-color: #bfd8ea;
height: 77px;
width: 77px;
color: white;
cursor: pointer;
float: right;
margin-top: 160px;
}


.btn-green {
    background-color: #00B96A;
    border-color: #357ebd;
    color: #ffffff;
}

.btn-green-lg {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    background-color: #00B96A;
    border-color: #357ebd;
    border-radius: 8px;
    color: #ffffff;
    font-size: 18px; /*change this to your desired size*/
    line-height: normal;
    padding: 18px 28px;
}
/* ========== BEGIN POPOVER 3 ========== */
.popover3 {
position: fixed !important;
top: 0;
left: 0;
z-index: 1060;
display: none;
width: 250px !important;
padding: 1px;
text-align: left;
white-space: normal;
background-color: #bfd8ea !important;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 0px !important;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.popover3.right {
margin-right: -10px;
}
.popover3 > .arrow,
.popover3 > .arrow:after {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.popover3 > .arrow {
border-width: 11px;
}
.popover3 > .arrow:after {
content: "";
border-width: 10px;
}
.popover3.left > .arrow {
top: 50%;
right: -11px;
margin-top: -11px;
border-right-width: 0;
border-left-color: #999;
border-left-color: rgba(0, 0, 0, .25);
}
.popover3.left > .arrow:after {
right: 1px;
bottom: -10px;
content: " ";
border-right-width: 0;
border-left-color: #bfd8ea !important;
}
/* ========== END POPOVER 3 ========== */

从ASP.NET MVC Helper TextBoxFor输入框中的custom.css文件使用覆盖CSS样式进行弹出窗口

0 个答案: