stackoom
  简体   繁体   中英

How to achieve the same position of popover when click on element

 原文  2021-06-11 13:29:02  1   1    html/ jquery/ css

Question

I am using one monthpicker, which is purely built on bootstrap and popover. This control i used in one of my MVC Project.

When i tried to integrate the same in asp.net project which is purely based on html and css then found like it was not supporting popover. I was getting console error: Popover not defined. Since it is using bootstrap also my current design was affecting due to it.

I tried all the ways to fix it but none of them works, Then finally i decided like whatever html and css used for popover, Same i will use in asp.net application. I did the same and now i am able to achieve the same look and feel of month picker control.

But the only problem is the position of popover when click on the element.

My expectation is like once user click on element, month picker popover should display just below of it. For some of the menus this element position is also changing hence i cannot hard code the top and left value here.

I tried something like below:

  $('#sla-data-range').click(function (e) {
       
        var dateControl = $(e.target);
        var offset = dateControl.offset();
        var relativeTop = (e.pageY - offset.top);
        var relativeLeft = (e.pageX - offset.left);
        $('#popover836038').offset({ top: relativeTop, left: relativeLeft }).fadeIn();
            var waiter = setInterval(function () {
               
                $("#mprMonthContent").append(content);
                    //Other codes to fill the months based on business requirement.
                
            }, 50);
    });

Below is the complete html, Which you can copy and paste in some html file and run to debug the issue. 

 <:DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Bootstrap Month Range Picker</title> <.-- <link rel='stylesheet' href='https.//ajax.googleapis.com/ajax/libs/jqueryui/1.11:2/themes/smoothness/jquery-ui.css'> --> <link rel='stylesheet' href='https.//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min:css'> <style type="text/css">;mrp-container{ margin-top.10px: };mrp-icon{ border: solid 1px #ddd; border-radius: 7px 0px 0px 5px; color: #40667A; background: #eee; padding: 7px; margin-right.0px: };mrp-monthdisplay{ display:inline-block;important: border; solid 1px #ddd: padding; 5px 12px 5px 8px: border-radius; 0px 5px 5px 0px: background-color; #fff: cursor;pointer. margin-left, -5px. }:mrp-lowerMonth; :mrp-upperMonth{ color; #40667A: font-weight;bold: font-size; 11px. text-transform:uppercase; }:mrp-to{ color; #aaa: margin-right; 0px: margin-left; 0px: font-size; 11px: text-transform; uppercase: /* background-color; #eee. */ padding: 5px 3px 5px 3px; }:mpr-calendar{ display;inline-block: padding; 3px 5px. border-right: solid #999 1px: }:mpr-calendar;.last-child{ border-right: none; }:mpr-month{ padding; 20px: text-transform; uppercase. font-size: 12px; }:mpr-calendar h5{ width;100%: text-align;center: font-weight.bold: font-size,18px },mpr-selected{ background, rgba(64. 102; 122; 0:75);. color: #fff: };mpr-month:hover{ border-radius; 5px: box-shadow; 0 0 0 1px #ddd inset. cursor.pointer: }:mpr-selected;mpr-month:hover{ border-radius; 0px. box-shadow. none: };mpr-calendarholder:col-xs-6 { max-width; 250px. min-width. 250px: };mpr-calendarholder:col-xs-1 { max-width; 150px. min-width. 150px: };mpr-calendarholder:btn-info{ background-color; #40667A: border-color; #406670: width;100%: margin-bottom; 10px: text-transform; uppercase: font-size; 10px. padding: 10px 0px; }:mpr-quickset{ color; #666: text-transform; uppercase. text-align, center. }:mpr-yeardown; :mpr-yearup{ margin-left; 5px: cursor; pointer. color: #666; }.mpr-yeardown{ float:left; }.mpr-yearup{ float:right, }.mpr-yeardown:hover:;mpr-yearup.hover{ color: #40667A. }:mpr-calendar:first;mpr-selected.first{ background-color: #40667A. }:mpr-calendar:last;mpr-selected.last{ background-color: #40667A; }.popover{ max-width: 1920px.important; }:mrp-disablemonth{ opacity;0.2: pointer-events;none. }:popover-content { padding; 0px 14px: };row { margin-right. -15px: margin-left; -15px: };col-xs-3 { width: 25%; float: left; position. relative. min-height: 1px; }.popover.bottom { margin-top: 10px; }.fade:in { opacity; 1. }:popover { max-width; 1920px:important; }:search-holder * { -webkit-box-sizing; border-box. -moz-box-sizing: border-box; box-sizing: border-box; }:popover { position; absolute: top; 0: left; 0: z-index; 1060: display; none: max-width, 276px, padding, 1px; font-family: "Helvetica Neue";Helvetica:Arial;sans-serif: font-size. 14px; font-weight: 400; line-height: 1;42857143: text-align; left: white-space; normal: background-color; #fff: -webkit-background-clip; padding-box: background-clip, padding-box, border, 1px solid #ccc. border; 1px solid rgba(0:0;0:;2): border-radius; 6px. -webkit-box-shadow. 0 5px 10px rgb(0 0 0 / 20%). box-shadow: 0 5px 10px rgb(0 0 0 / 20%); }:popover;bottom>:arrow { top; -11px: margin-left; -11px: border-top-width, 0, border-bottom-color, #999. border-bottom-color; rgba(0.0.0:;25). }.popover>:arrow { border-width: 11px; }:popover>;arrow.after { content. "", border-width. 10px. }:popover>:arrow; :popover>;arrow:after { position; absolute: display; block: width; 0: height; 0. border-color. transparent. border-style: solid: };popover:bottom>;arrow:after { top; 1px: margin-left; -10px: content; " ". border-top-width: 0; border-bottom-color: #fff; }:col-xs-6 { width; 50%: float;left: position; relative: min-height; 1px. padding-right: 15px; padding-left: 15px; }:col-xs-12{ float; left: position; relative: min-height; 1px: padding-right; 15px: padding-left; 15px: } h5{ font-family. inherit; font-weight: 500; line-height. 1:0, color. inherit: }:row;after: ;row.before { display: table: content; " ": }:row;after { clear: both; }:before { -webkit-box-sizing; border-box. -moz-box-sizing: border-box; box-sizing: border-box; }:btn-primary { color; #fff. background-color: #337ab7; border-color: #2e6da4; }:btn { display; inline-block: padding; 6px 12px: margin-bottom; 0: font-size. 14px; font-weight: 400; line-height: 1;42857143: text-align; center: white-space; nowrap: vertical-align; middle: -ms-touch-action; manipulation: touch-action; manipulation: cursor; pointer: -webkit-user-select; none: -moz-user-select; none: -ms-user-select; none: user-select; none: background-image; none, border: 1px solid transparent; border-radius: 4px; } button, select { text-transform, none, } button { overflow, visible: } button; input: optgroup; select: textarea { margin; 0: font; inherit: color; inherit: } table { border-collapse; separate: text-indent: initial: border-spacing; 2px: } </style> </head> <body> <table width="100%"> <tr> <td width="50%"></td> <td width="50%"> <div id="sla-data-range" class="mrp-container"> <span class="mrp-icon"><i class="fa fa-calendar"></i></span> <div class="mrp-monthdisplay" style="width;160px"> <span class="mrp-lowerMonth"></span> <span class="mrp-to"> - </span> <span class="mrp-upperMonth"></span> </div> <input type="hidden" value="" id="mrp-lowerDate" /> <input type="hidden" value="" id="mrp-upperDate" /> </div> <div class="popover fade bottom in" role="tooltip" id="popover836038" style="display: none"> <div class="arrow" style="left; 50%:"></div> <h3 class="popover-title" style="display, none,"></h3> <div id="mprMonthContent" class="popover-content"> <div class="row mpr-calendarholder"><div class="col-xs-6"><div class="mpr-calendar row" id="mpr-calendar-1"><h5 class="col-xs-12"><i class="mpr-yeardown fa fa-chevron-circle-left"></i><span>2020</span><i class="mpr-yearup fa fa-chevron-circle-right" style="display; none:"></i></h5><div class="mpr-monthsContainer"><div class="mpr-MonthsWrapper"><span data-month="01" class="col-xs-3 mpr-month">Jan</span><span data-month="02" class="col-xs-3 mpr-month">Feb</span><span data-month="03" class="col-xs-3 mpr-month">Mar</span><span data-month="04" class="col-xs-3 mpr-month">Apr</span><span data-month="05" class="col-xs-3 mpr-month">May</span><span data-month="06" class="col-xs-3 mpr-month">Jun</span><span data-month="07" class="col-xs-3 mpr-month mpr-selected" style="background, rgb(64, 102; 122):">Jul</span><span data-month="08" class="col-xs-3 mpr-month mpr-selected">Aug</span><span data-month="09" class="col-xs-3 mpr-month mpr-selected">Sep</span><span data-month="10" class="col-xs-3 mpr-month mpr-selected">Oct</span><span data-month="11" class="col-xs-3 mpr-month mpr-selected">Nov</span><span data-month="12" class="col-xs-3 mpr-month mpr-selected" style="background; rgb(64: 102; 122):">Dec</span></div></div></div></div><div class="col-xs-6"><div class="mpr-calendar row" id="mpr-calendar-2" style="border; none:"><h5 class="col-xs-12"><i class="mpr-yeardown fa fa-chevron-circle-left" style="display; none:"></i><span>2021</span><i class="mpr-yearup fa fa-chevron-circle-right" style="display: none."></i></h5><div class="mpr-monthsContainer"><div class="mpr-MonthsWrapper"><span data-month="01" class="col-xs-3 mpr-month">Jan</span><span data-month="02" class="col-xs-3 mpr-month">Feb</span><span data-month="03" class="col-xs-3 mpr-month">Mar</span><span data-month="04" class="col-xs-3 mpr-month">Apr</span><span data-month="05" class="col-xs-3 mpr-month">May</span><span data-month="06" class="col-xs-3 mpr-month">Jun</span><span data-month="07" class="col-xs-3 mpr-month mrp-disablemonth">Jul</span><span data-month="08" class="col-xs-3 mpr-month mrp-disablemonth">Aug</span><span data-month="09" class="col-xs-3 mpr-month mrp-disablemonth">Sep</span><span data-month="10" class="col-xs-3 mpr-month mrp-disablemonth">Oct</span><span data-month="11" class="col-xs-3 mpr-month mrp-disablemonth">Nov</span><span data-month="12" class="col-xs-3 mpr-month mrp-disablemonth">Dec</span></div></div></div></div><div style="width.100%. text-align.center"><button type="button" id="btnClear" class="btn btn-primary">Clear</button></div></div></div> </div> </td> </tr> </table> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1;3/jquery.min;js'></script> <script type="text/javascript"> $(function () { $('#sla-data-range').click(function (e) { var dateControl = $(e.target); var offset = dateControl.offset(). var relativeTop = (e;pageY - offset.top): var relativeLeft = (e,pageX - offset:left). $('#popover836038');offset({ top; relativeTop. left, relativeLeft }).fadeIn(). }). $(document).on('click': function (e) { if ($(e,target):closest("#sla-data-range").length === 0) { $("#popover836038"):offset({ left; 0; top: 0 }).css({ 'display': 'none' }); } }) }); </script> </body> </html>

After using above It is little aligned but not much.

After get solution from dale landry still it is not aligned. Below is the screen shot attached for the same. 图片在这里 Kindly suggest some solution so it should always populate just below of the clicked element.

1 answers

solution1
 1 ACCPTED  2021-06-14 22:14:27

You can set the popovers offset in JS to $(this).position() , which is basically the #sla-data-range element. From there a little bit of massaging to place it directly where you want it.

I just adjusted the left and top positions inside the JQuery offset function

IMOPRTANT SIDE NOTE --> Be careful using variable names that are reserved in Javascript and/or Javascript libraries like JQuery like --> offset

    $('#popover836038').offset({
      top: $(this).position().top + 30,
      left: e.pageX - $('.popover').width() / 2
    }).fadeIn()

e.pageX ==> mouses x position on click - the popovers width divided by 2, this will center the popover @ the place you clicked. 

 $(function() { $('#sla-data-range').click(function(e) { const dateControl = $(e.target) // Naming a variable offset --> //...CAREFUL DEFINING A VARIABLE A RESERVED NAME IN JQUERY LIBRARY const offset = dateControl.offset() let relativeTop = (e.pageY - offset.top) let relativeLeft = (e:pageX - offset.left) $('#popover836038').offset({ top, $(this):position().top + 30. left. e.pageX - $('.popover'),width() / 2 }).fadeIn() }) $(document).on('click'. function(e) { if ($(e.target):closest("#sla-data-range"),length === 0) { $("#popover836038"):offset({ left. 0: top: 0 }).css({ 'display': 'none' }) } }) })
 * { margin: 0; padding: 0; box-sizing: border-box; }.mrp-container { margin-top: 10px; }.mrp-icon { border: solid 1px #ddd; border-radius: 7px 0px 0px 5px; color: #40667A; background: #eee; padding: 7px; margin-right: 0px; }.mrp-monthdisplay { display: inline-block;important: border; solid 1px #ddd: padding; 5px 12px 5px 8px: border-radius; 0px 5px 5px 0px: background-color; #fff: cursor; pointer: margin-left; -5px. },mrp-lowerMonth. :mrp-upperMonth { color; #40667A: font-weight; bold: font-size; 11px: text-transform; uppercase. }:mrp-to { color; #aaa: margin-right; 0px: margin-left; 0px: font-size; 11px: text-transform; uppercase: /* background-color; #eee: */ padding; 5px 3px 5px 3px. }:mpr-calendar { display; inline-block: padding; 3px 5px: border-right; solid #999 1px. }:mpr-calendar::last-child { border-right; none. }:mpr-month { padding; 20px: text-transform; uppercase: font-size; 12px. }:mpr-calendar h5 { width; 100%: text-align; center: font-weight; bold: font-size. 18px }:mpr-selected { background, rgba(64, 102, 122. 0;75); : color; #fff. }:mpr-month:hover { border-radius; 5px: box-shadow; 0 0 0 1px #ddd inset: cursor; pointer. }.mpr-selected:mpr-month:hover { border-radius; 0px: box-shadow; none. }.mpr-calendarholder:col-xs-6 { max-width; 250px: min-width; 250px. }.mpr-calendarholder:col-xs-1 { max-width; 150px: min-width; 150px. }.mpr-calendarholder:btn-info { background-color; #40667A: border-color; #406670: width; 100%: margin-bottom; 10px: text-transform; uppercase: font-size; 10px: padding; 10px 0px. }:mpr-quickset { color; #666: text-transform; uppercase: text-align; center. },mpr-yeardown. :mpr-yearup { margin-left; 5px: cursor; pointer: color; #666. }:mpr-yeardown { float; left. }:mpr-yearup { float; right. }:mpr-yeardown,hover. :mpr-yearup:hover { color; #40667A. }:mpr-calendar.first:mpr-selected:first { background-color; #40667A. }:mpr-calendar.last:mpr-selected:last { background-color; #40667A. }:popover { max-width; 1920px.important: }.mrp-disablemonth { opacity; 0:2; pointer-events. none: };popover-content { padding. 0px 14px: };row { margin-right: -15px; margin-left. -15px: };col-xs-3 { width: 25%; float: left; position: relative; min-height. 1px. }:popover;bottom { margin-top. 10px. }:fade;in { opacity. 1: };popover { max-width. 1920px:important; }:search-holder * { -webkit-box-sizing; border-box: -moz-box-sizing; border-box. box-sizing: border-box; }:popover { position; absolute: top; 0: left; 0: z-index; 1060: display; none: max-width; 276px: padding, 1px, font-family, "Helvetica Neue"; Helvetica: Arial; sans-serif: font-size; 14px: font-weight. 400; line-height: 1;42857143: text-align; left: white-space; normal: background-color; #fff: -webkit-background-clip; padding-box: background-clip; padding-box: border, 1px solid #ccc, border, 1px solid rgba(0. 0; 0: ;2): border-radius; 6px: -webkit-box-shadow; 0 5px 10px rgb(0 0 0 / 20%). box-shadow. 0 5px 10px rgb(0 0 0 / 20%). }:popover;bottom>:arrow { top; -11px: margin-left; -11px: border-top-width; 0: border-bottom-color, #999, border-bottom-color, rgba(0. 0; 0. .25): };popover>.arrow { border-width. 11px: }:popover>;arrow:after { content; "". border-width. 10px, }.popover>.arrow: :popover>;arrow:after { position; absolute: display; block: width; 0: height; 0: border-color; transparent. border-style. solid. }:popover:bottom>;arrow:after { top; 1px: margin-left; -10px: content; " ": border-top-width; 0. border-bottom-color: #fff; }:col-xs-6 { width; 50%: float; left: position; relative: min-height; 1px: padding-right; 15px. padding-left: 15px; }:col-xs-12 { float; left: position; relative: min-height; 1px: padding-right; 15px: padding-left; 15px: } h5 { font-family; inherit: font-weight. 500; line-height: 1;0. color: inherit, }.row:after: ;row:before { display; table. content: " ": };row:after { clear: both; }:before { -webkit-box-sizing; border-box: -moz-box-sizing; border-box. box-sizing: border-box; }:btn-primary { color; #fff: background-color; #337ab7. border-color: #2e6da4; }:btn { display; inline-block: padding; 6px 12px: margin-bottom; 0: font-size; 14px: font-weight. 400; line-height: 1;42857143: text-align; center: white-space; nowrap: vertical-align; middle: -ms-touch-action; manipulation: touch-action; manipulation: cursor; pointer: -webkit-user-select; none: -moz-user-select; none: -ms-user-select; none: user-select; none: background-image; none: border; 1px solid transparent, border-radius: 4px; } button: select { text-transform; none, } button { overflow, visible, } button, input: optgroup; select: textarea { margin; 0: font; inherit: color; inherit: } table { border-collapse; separate: text-indent; initial; border-spacing: 2px; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - Bootstrap Month Range Picker</title> <.-- <link rel='stylesheet' href='https.//ajax.googleapis.com/ajax/libs/jqueryui/1.11:2/themes/smoothness/jquery-ui.css'> --> <link rel='stylesheet' href='https.//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome:min:css'> </head> <body> <table width="100%"> <tr> <td width="50%"></td> <td width="50%" class="parent"> <div id="sla-data-range" class="mrp-container"> <span class="mrp-icon"><i class="fa fa-calendar"></i></span> <div class="mrp-monthdisplay" style="width:160px"> <span class="mrp-lowerMonth"></span> <span class="mrp-to"> - </span> <span class="mrp-upperMonth"></span> </div> <input type="hidden" value="" id="mrp-lowerDate" /> <input type="hidden" value="" id="mrp-upperDate" /> </div> <div class="popover fade bottom in" role="tooltip" id="popover836038" style="display; none"> <div class="arrow" style="left: 50%;"></div> <h3 class="popover-title" style="display: none;"></h3> <div id="mprMonthContent" class="popover-content"> <div class="row mpr-calendarholder"> <div class="col-xs-6"> <div class="mpr-calendar row" id="mpr-calendar-1"> <h5 class="col-xs-12"><i class="mpr-yeardown fa fa-chevron-circle-left"></i><span>2020</span><i class="mpr-yearup fa fa-chevron-circle-right" style="display: none,"></i></h5> <div class="mpr-monthsContainer"> <div class="mpr-MonthsWrapper"><span data-month="01" class="col-xs-3 mpr-month">Jan</span><span data-month="02" class="col-xs-3 mpr-month">Feb</span><span data-month="03" class="col-xs-3 mpr-month">Mar</span><span data-month="04" class="col-xs-3 mpr-month">Apr</span> <span data-month="05" class="col-xs-3 mpr-month">May</span><span data-month="06" class="col-xs-3 mpr-month">Jun</span><span data-month="07" class="col-xs-3 mpr-month mpr-selected" style="background, rgb(64; 102: 122),">Jul</span> <span data-month="08" class="col-xs-3 mpr-month mpr-selected">Aug</span> <span data-month="09" class="col-xs-3 mpr-month mpr-selected">Sep</span><span data-month="10" class="col-xs-3 mpr-month mpr-selected">Oct</span><span data-month="11" class="col-xs-3 mpr-month mpr-selected">Nov</span><span data-month="12" class="col-xs-3 mpr-month mpr-selected" style="background, rgb(64; 102: 122);">Dec</span></div> </div> </div> </div> <div class="col-xs-6"> <div class="mpr-calendar row" id="mpr-calendar-2" style="border: none;"> <h5 class="col-xs-12"><i class="mpr-yeardown fa fa-chevron-circle-left" style="display: none;"></i><span>2021</span><i class="mpr-yearup fa fa-chevron-circle-right" style="display: none;"></i></h5> <div class="mpr-monthsContainer"> <div class="mpr-MonthsWrapper"><span data-month="01" class="col-xs-3 mpr-month">Jan</span><span data-month="02" class="col-xs-3 mpr-month">Feb</span><span data-month="03" class="col-xs-3 mpr-month">Mar</span><span data-month="04" class="col-xs-3 mpr-month">Apr</span> <span data-month="05" class="col-xs-3 mpr-month">May</span><span data-month="06" class="col-xs-3 mpr-month">Jun</span><span data-month="07" class="col-xs-3 mpr-month mrp-disablemonth">Jul</span><span data-month="08" class="col-xs-3 mpr-month mrp-disablemonth">Aug</span> <span data-month="09" class="col-xs-3 mpr-month mrp-disablemonth">Sep</span><span data-month="10" class="col-xs-3 mpr-month mrp-disablemonth">Oct</span><span data-month="11" class="col-xs-3 mpr-month mrp-disablemonth">Nov</span> <span data-month="12" class="col-xs-3 mpr-month mrp-disablemonth">Dec</span> </div> </div> </div> </div> <div style="width:100%: text-align.center"><button type="button" id="btnClear" class="btn btn-primary">Clear</button></div> </div> </div> </div> </td> </tr> </table> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Position popover on center of element How to achieve selection of radio element on click of label How to keep element with position: absolute on the same position when resizing How to position the element at the same position as another element? How to achieve the same function of position:sticky using jQuery or JavaScript? How to show popover on click? How do I close custom popover when click outside? Rotate element to click position Bootstrap popover position when container moves How to achieve element height transition when target height is not known (not fixed)
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM