Архивы modal

Диалоговое окно на чистом javascript

27.12.2022 Павел Грибов WEB

Задача: вывести диалоговое окно без использования Jquery

Решение:

<style>
.DialogConfirm{
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(96, 79, 79, 0.51);
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.DialogConfirm>div{
  width: 90%;
  margin: 30% auto;
  padding: 10px 20px;
  background: #f7f7f7;
  border-style: solid;
  border-color: aliceblue;
  border-width: initial;
}

.DialogConfirm div p{
  text-align:center;
}

.DialogConfirm div button{
    width: 40%;
    margin: 0 5%;
    border-style: double;
    border-color: black;
}    
</style>    
<script>
function myConfirm(text,buttons=Array(), cb){
    var body = document.getElementsByTagName('body')[0];
    var overlay = document.createElement('div');
    overlay.className = 'DialogConfirm';
    var box = document.createElement('div');  
    var p = document.createElement('p');
    p.appendChild(document.createTextNode(text));
    box.appendChild(p);
    buttons.forEach(function(bt, index, array) {
        tmp_btn=document.createElement('button');
        tmp_btn.appendChild(document.createTextNode(bt));
        tmp_btn.addEventListener('click', function(){ cb(bt); body.removeChild(overlay); }, false);
        box.appendChild(tmp_btn);
    });
        
    overlay.appendChild(box)
    body.appendChild(overlay);    
}
myConfirm('Бахнем и весь мир в труху?',["Давай","Попозжа"], function(value){ console.log(value); });   
</script>

<style>

.DialogConfirm{

position: fixed;

width: 100%;

height: 100%;

background: rgba(96, 79, 79, 0.51);

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

}

.DialogConfirm>div{

width: 90%;

margin: 30% auto;

padding: 10px 20px;

background: #f7f7f7;

border-style: solid;

border-color: aliceblue;

border-width: initial;

}

.DialogConfirm div p{

text-align:center;

}

.DialogConfirm div button{

width: 40%;

margin: 0 5%;

border-style: double;

border-color: black;

}

</style>

function myConfirm(text,buttons=Array(), cb){

var body = document.getElementsByTagName('body')[0];

var overlay = document.createElement('div');

overlay.className = 'DialogConfirm';

var box = document.createElement('div');

var p = document.createElement('p');

p.appendChild(document.createTextNode(text));

box.appendChild(p);

buttons.forEach(function(bt, index, array) {

tmp_btn=document.createElement('button');

tmp_btn.appendChild(document.createTextNode(bt));

tmp_btn.addEventListener('click', function(){ cb(bt); body.removeChild(overlay); }, false);

box.appendChild(tmp_btn);

});

overlay.appendChild(box)

body.appendChild(overlay);

}

myConfirm('Бахнем и весь мир в труху?',["Давай","Попозжа"], function(value){ console.log(value); });

</script>

Оставить комментарий javascript, modal, диалоговое окно

TinyMCE и JQuery UI dialog modal

03.03.2014 Павел Грибов WEB

А именно редактор tinymce не корректно обрабатывает «вложенные» модальные окна в открытом модальном окне:

                       $("#pg_add_edit").dialog({autoOpen: false,height: 600,width: 800,modal:true,title: "Добавление новости" });
                       $("#pg_add_edit" ).dialog( "open" );                                   
                       $("#pg_add_edit").load("controller/client/view/news/news.php?step=add");

$("#pg_add_edit").dialog({autoOpen: false,height: 600,width: 800,modal:true,title: "Добавление новости" });

$("#pg_add_edit" ).dialog( "open" );

$("#pg_add_edit").load("controller/client/view/news/news.php?step=add");

<form ENCTYPE="multipart/form-data" action="?content_page=news&step=<?php echo "$step&newsid=$id"; ?>" method="post" name="form1" target="_self">
    <input name=dtpost id=dtpost value="<?php echo "$dtpost"; ?>"><br>
    <input name=title  id=title value="<?php echo "$title";?>" class="span8" placeholder="Заголовок"><br>
    <textarea class="span12" id="txt" name=txt  rows="15" placeholder="Введите новость">
        <?php echo "$txt";?>
    </textarea>

</form>

   $('textarea').tinymce({
      script_url : 'js/tinymce/tinymce.min.js',
      theme : "modern",      
      mode: "none",
      'theme_advanced_buttons3_add': 'code',
      plugins: "save fullscreen link emoticons code",
      toolbar: "save fullscreen link emoticons",                    
      save_enablewhendirty: true,
      save_onsavecallback: function() {document.form1.submit();}      
   });

<form ENCTYPE="multipart/form-data" action="?content_page=news&step=<?php echo "$step&newsid=$id"; ?>" method="post" name="form1" target="_self">

<input name=title id=title value="<?php echo "$title";?>" class="span8" placeholder="Заголовок"><br>

<?php echo "$txt";?>

</textarea>

</form>

$('textarea').tinymce({

script_url : 'js/tinymce/tinymce.min.js',

theme : "modern",

mode: "none",

'theme_advanced_buttons3_add': 'code',

plugins: "save fullscreen link emoticons code",

toolbar: "save fullscreen link emoticons",

save_enablewhendirty: true,

save_onsavecallback: function() {document.form1.submit();}

});

Дает результатом не редактируемые поля в диалоговых окнах tinymce, например при вызове диалога добавления ссылки (link).

На форумах дают совет добавить в код:

      $(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
		e.stopImmediatePropagation();
	}
});

$(document).on('focusin', function(e) {

if ($(event.target).closest(".mce-window").length) {

e.stopImmediatePropagation();

}

});

Однако мне не помогло. Пришлось пока отказаться от модальных окон, до момента «пока не найду решение».

Оставить комментарий dialog, Jquery, modal, problem, TinyMCE, не редактируемый диалог

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31